Jump to content

jasonxweb

Members
  • Content Count

    13
  • Joined

  • Last visited

Community Reputation

0 Neutral

About jasonxweb

  • Rank
    Newbie
  1. Hello Everyone, On my web page, I want the user to roll their mouse wheels to play sounds and activate hyperlinks. I've been able to implement the first goal to some extent, but am facing problems. You can see my code in action at https://naturefarm3000.blogspot.com , and the code itself below. Problem 1 : When you visit the above page, you'll see that if the first action you take is to roll your mouse wheel while hovering over the yellow boxes, nothing will happen. But, if you click your mouse anywhere on the page once, and let the sound effect finish playing, then afterwards, you can roll your mouse wheel while hovering on the yellow boxes, and the sound will play. To observe this again, refresh the above page. I'm not sure what's happening here - it's as if an initial mouse click anywhere on the page somehow activates subsequent onwheel events. I have the same problem when I run the code locally on my computer ( where the entire page is just my own code, as shown here, without anything added by the Blogger platform ), using Google Chrome Version 80.0.3987.122 (Official Build) (64-bit). I want to make the page so people can use the mouse wheel roll to activate sound effects immediately after they reach the page ( without having do a click to activate the onwheel event ) - including when accessed locally from my computer - is there a way I can make that happen? Problem 2 : I have a green box on the lower left that has a hyperlink. I want to make it so it activates with a mouse wheel roll ( onwheel event ), instead of a mouse click. Is there a way to do this? Problem 3 : I have a beige button on the lower right that I also want the user to activate with a mouse roll instead of a click - can this be done? Also, I've used the same sound playing code I used for the yellow buttons, but it appears it does not work with this button - what is causing this to happen? Is there a way to make a button activate a hyperlink as well ( also with a mouse wheel roll )? Thank you for your expertise. Jason <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Nature Farm</title> <style> body {background-color: hsla(0, 0%, 50%, 1);} body {overflow:hidden;} .box001 { background-color:black; padding: 1px; margin: 1px; width: 100%; overflow: none; display: block; text-align: center; cursor:default; } .box002 { padding: 1px; margin: 1px 0px 1px 0px; font-size: 20px; font-weight: normal; font-family: sans-serif; text-align: center; display: inline-block; vertical-align:top; width: 32.5%; cursor:default; } .button001 { border: 5 px; background: yellow; padding: 5px; margin: 1px 0px 1px 0px; font-weight: lighter; font-size: 18px; font-family: sans-serif; width: 95%; display: inline-block; cursor:default; } </style> </head> <body> <div class="box001"> <div class="button001" onclick="function_horse()" onwheel="function_horse()"> <img src="https://static.wixstatic.com/media/ad4933_d938f962d79048438e80e1853df10ae2~mv2.jpg" height="100"> Gently stroke the horse to hear its sound (Roll mouse wheel inside the yellow box) <script> function function_horse(){ var audio = document.getElementById("function_horse"); audio.play();} </script> <audio id="function_horse" preload="auto" src="https://static.wixstatic.com/mp3/ad4933_99e62afd25c34b3793d45baf2c88299c.mp3" ></audio> </div> <div class="button001" onclick="function_pig()" onwheel="function_pig()"> <img src="https://static.wixstatic.com/media/ad4933_b399e37a4d984c9487adb7900a103ed9~mv2.jpg" height="100"> Gently stroke the pig to hear its sound (Roll mouse wheel inside the box) <script> function function_pig(){ var audio = document.getElementById("function_pig"); audio.play();} </script> <audio id="function_pig" preload="auto" src="https://static.wixstatic.com/mp3/ad4933_490fee3f3f4545d09c204398c91fcdec.mp3".mp3" ></audio> </div> <div class="button001" onclick="function_cow()" onwheel="function_cow()"> <img src="https://static.wixstatic.com/media/ad4933_4812a3c15c60471eaa9b21f3be9a3c14~mv2.jpg" height="100"> Gently stroke the cow to hear its sound (Roll mouse wheel inside the box) <script> function function_cow(){ var audio = document.getElementById("function_cow"); audio.play();} </script> <audio id="function_cow" preload="auto" src="https://static.wixstatic.com/mp3/ad4933_63f2db4cd11741c5ad1c2a83adb8b489.mp3" ></audio> </div> </div> <div class="box001"> <div class="box002" style="background:#9EFFA8"> <a href="https://en.wikipedia.org/wiki/Mammal"> Stroke the grass (roll mouse wheel here) to read more about mammals </a> </div> <div class="box002" style="background:white"> <button onclick="myFunction()" onwheel="myFunction()" style="background:antiquewhite" style="font-size: 18px;">Stroke the hay (roll mouse wheel here) to read more about farms</button> <script> function myFunction() {} { var audio = document.getElementById("myFunction"); audio.play();} </script> <audio id="myFunction" preload="auto" src="https://static.wixstatic.com/mp3/ad4933_c82087483a3c430cb9d242d2708a62f1.mp3" ></audio> </div> </div> </body> </html>
  2. Hi Dsonesuk, I was able to remove 2 <!DOCTYPE html>'s from my code. When I checked the source code of the home page there is now only one <!DOCTYPE html>. However, my code is inserted into widgets and pages of a Blogger template, and much of the other code is applied by Blogger. Jason
  3. Hello everyone, I am trying to make a navigation bar. I want the buttons to be image hyperlinks that change opacity on hover and click. This is how I am doing it: <style> .jw-button a:link, .jw-button a:visited { border: 2px dotted orange; opacity: 0.6; overflow: hidden; } .jw-button a:hover, .jw-button a:active { border: 2px dotted yellow; text-decoration: none; /* to remove the little line */ opacity: 0.95; overflow: hidden; } </style> <body> <div class="jw-button"> <a href="http://www.jasonwangart.com/p/spreads.html"> <img src="https://1.bp.blogspot.com/-s92F8qjBMsg/VylLTxoeBLI/AAAAAAAABN8/h5nPS8xOxyQE2PSqyNYynPCMhCzxt8OkwCK4B/s400/20160503%2B-%2Bbuttons-02.png" alt="illustrations" width=auto height="25px" /> </a> <a href="http://www.jasonwangart.com/p/tutorials_2.html"> <img src="https://1.bp.blogspot.com/-xAWLlsmJLjA/VylLT3LuO-I/AAAAAAAABOU/6N04uTBi69MvWJtOqPVr5ZvHyKYhV-eKwCK4B/s400/20160503%2B-%2Bbuttons-03.png" alt="tutorials" width=auto height="25px" /> </a> <a href="http://www.jasonwangart.com/p/references_3.html"> <img src="https://2.bp.blogspot.com/-iGP0rlCRJBQ/VylLT61jNxI/AAAAAAAABOQ/oPp61KLO6LgZuSFGLjpWF5JTxto6yqVSQCK4B/s320/20160503%2B-%2Bbuttons-04.png" alt="references" width=auto height="25px" /> </a> <a href="http://www.jasonwangart.com/p/contact.html"> <img src="https://4.bp.blogspot.com/-FJQ2uySI0f0/VylLTxelv9I/AAAAAAAABOY/FjS6c-OOc2Q1hdNhVL_-yBUGvCsX9g10gCK4B/s400/20160503%2B-%2Bbuttons-05.png" alt="contact" width=auto height="25px" /> </a> <a href="http://www.facebook.com/jasonwangart"> <img src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" alt="facebook" width="30px" height="30px" /> </a> <a href="http://instagram.com/jasonwangart/"> <img src="http://3.bp.blogspot.com/-Bip-5XKJURo/VSQhElKMGkI/AAAAAAAAA38/RM3xUkaQWUM/s1600/LOGO%2Binstagram%2Bsimple%2B72%2Bc.png" alt="instagram" width="30px" height="30px" /> </a> </div> </body> However, as you can see the results at: www.jasonwangart.com , the resulting divs (at top of page navigation bar, in the orange dotted lines) that contain the image hyperlinks do not expand to fit the image hyperlinks. I have put "display: inline-block;" in the code, but the divs still are not expanding. Do you know why this is? Thank you, Jason
  4. Thank you dsonesuk! Using span worked very well! And thanks for the info about the document tags.
  5. Hi everyone, Can anyone tell me why my div is not auto expanding to fit its contents, even though I set "width: auto;" ? Also, why does my "display: inline;" not work? You can see what I mean here: http://www.jasonwangart2.blogspot.ca/ Basically, I am trying to make it so that all the elements inside the div-with-thick-red-dashed-border will appear in one horizontal row. Question 1: I set the div-with-thick-red-dashed-border to "width: auto;", but the inner divs are wrapping for some reason, and the div-with-thick-red-dashed-border is not expanding horizontally to contain more divs. Question 2: Also, I set the div-with-thick-orange-dashed-border, the div-with-thick-green-dashed-border, and the div-with-thick-blue-dashed-border to "display: inline;", but they are wrapping and breaking up. Does anyone know the answers to the 2 above questions? My goal is to make all the elements inside the div-with-thick-red-dashed-border line up in one horizontal arrangement. The code is below. Thank you very much, Jason <!doctype html> <style>/* HEADER OUTER BOX */ .jw-1-header-box { border: 1px dashed red; width:100%; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: rgba(0,0,0,1); }/* GRAPHICS */ .jw-2-graphics-bar { border: 1px dashed purple; width: 100%; height: 0px; overflow: visible; } .jw-3-circle-large { position: relative; left: 10px; top: -200px; width: 270px; height: 270px; background-color: rgba(180,200,255,1); border-radius: 135px; } /* NAVIGATION */ .jw-2-nav-bar { border: 1px dashed cyan; width: 100%; overflow: hidden; } .jw-3-nav-bar-left-section { border: 1px dashed maroon; display: inline; float: left; } .jw-3-nav-bar-right-section { border: 5px dashed red; width: auto; display: inline; float: right; } /* HOME BUTTON */ .jw-3-button-home a:link, .jw-3-button-home a:visited { border: 1px dashed purple; position: relative; z-index: 1; font-size: 41px; color: rgba(80,100,155,1); } .jw-3-button-home a:hover, .jw-3-button-home a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } /* PAGES */ .jw-3-button-pages a:link, .jw-3-button-pages a:visited { border: 5px dotted orange; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(80,100,155,1); } .jw-3-button-pages a:hover, .jw-3-button-pages a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } .jw-3-social-text-box { border: 5px dotted green; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(0,0,0,0.7); } .jw-3-social-icon-box { border: 5px dotted blue; margin: 0px 10px 0px 10px; display: inline; font-size: 16px; /* need this to align block-1 */ } .jw-opacity-link a:link, .jw-opacity-link a:visited { border: 0px solid black; width: 30px; opacity: 0.45; } .jw-opacity-link a:hover, .jw-opacity-link a:active { border: 0px solid black; text-decoration: none; /* to remove the little line */ opacity: 1.0; } img /* need this to align icon image */ { vertical-align:top; /* top or bottom */ }/* DIVIDER */ .jw-2-divider-1 { border: 1px dashed violet; width: 100%; padding: 50px 0px 0px 0px; text-align: center; } .jw-3-circle-small { display: inline-block; width: 10px; height: 10px; background-color: rgba(171,225,250,1); border-radius: 5px; margin: 0px 50px 0px 50px; } /* UPDATE */ .jw-2-update-bar { border: 1px dashed pink; width:100%; text-align: center; } .jw-3-update-text-box { border: 1px dashed turquoise; font-size: 16px; color: rgba(0,0,0,1); }</style> <!-- HTML --><!-- MAIN BOX --> <div class="jw-1-header-box"><!-- GRPHICS --> <div class="jw-2-graphics-bar"> <div class="jw-3-circle-large"></div> </div><!-- NAVIGATION --> <div class="jw-2-nav-bar"> <div class="jw-3-nav-bar-left-section"> <div class="jw-3-button-home"> <a href="http://www.jasonwangart.com">Jason Wang Art</a> </div> </div> <div class="jw-3-nav-bar-right-section"> <div class="jw-3-button-pages"> <a href="http://www.jasonwangart.com/search/label/illustration">illustrations</a> <a href="http://www.jasonwangart.com/search/label/tutorial">tutorials</a> <a href="http://www.jasonwangart.com/search/label/reference">references</a> <a href="http://www.jasonwangart.com/p/about-web.html">about & contact</a> </div> <div class="jw-3-social-text-box"> Follow me on </div> <div class="jw-3-social-icon-box"> <div class="jw-opacity-link"> <a href="http://www.facebook.com/jasonwangart"> <img src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" width="24px" height="24px" alt="facebook"/> </a> </div> </div> </div> </div> <!-- DIVIDER --> <div class="jw-2-divider-1"> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> </div><!-- UPDATE --> <div class="jw-2-update-bar"> <div class="jw-3-update-text-box"> Berry Season 9 coming soon! </div> </div> </div> </!doctype>
  6. Thanks everyone for your suggestions. Here is what worked in the end: <style> #jw-1-about-centre-align { width: 300%; border: 0px dashed red; background-color: rgba(255,255,255,0.0); text-align: center; } #jw-2-about-pad { display: inline-block; padding: 20px 30px; border: solid rgba(0,0,0,0.2); border-width: 0px 1px; border-radius: 15px 15px 15px 15px / 30px 30px 30px 30px; text-align: left; font-size: 16px; background-color: rgba(255,255,255,0.3); } .jw-3-about-column-content { display: table-cell; border: 0px dashed orange; width: 300px; } .jw-3-about-column-divider { display: table-cell; vertical-align: middle; border: 0px dashed green; height: 100px; /* KEEP */ background-color: rgba(255,255,255,0); } .jw-4-about-divider { border: 0px dashed blue; width: 1px; height: 90%; margin: 0px 20px; background-color: rgba(0,0,0,0.4); } </style> <div id="jw-1-about-centre-align"> <div id="jw-2-about-pad"> <div class="jw-3-about-column-content"> <!-- JUST CODE FOR ABOUT INFO --> </div> <div class="jw-3-about-column-divider"> <div class="jw-4-about-divider"> </div> </div> <div class="jw-3-about-column-content"> <!-- JUST CODE FOR CONTACT FORM --> </div> <div class="jw-3-about-column-divider"> <div class="jw-4-about-divider"> </div> </div> <div class="jw-3-about-column-content"> <!-- JUST CODE FOR MAILING LIST --> </div> </div> </div>
  7. Thanks everyone for your response! Tezzo, thank you for your suggestion. It looks like the .sep div will only centre vertically if the .block div is also set to "vertical-align:middle". If I change the .block div to "vertical-align:top", then the .sep div will not center vertically, even if it is still set to "vertical-align:middle". Do you know if there's a way to set .sep to centre vertically while .block is set to align to top? Thank you.
  8. Hi everyone! I am trying to vertically center divs inside another div, using: position: relative;vertical-align: middle; But it's not working! Does anyone know why? On this page: http://www.jasonwangart.com/p/about-web.html , I am trying to make the dividers - the vertical black lines - be vertically centered within the parent div. You can see my code here: <!doctype html> <style> .jw-1-about-centre-align { width: 300%; border: 0px solid red; font-size: 16px; background-color: rgba(255,255,255,0.0); text-align: center; } .jw-2-about-pad { vertical-align: top; display: inline-block; min-width: 60px; padding: 0px 0px 0px 0px; border: solid rgba(0,0,0,0.2); border-width: 0px 1px 0px 1px; border-radius: 15px 15px 15px 15px / 30px 30px 30px 30px; margin: 0px auto 0px auto; text-align: left; font-size: 16px; background-color: rgba(255,255,255,0.3); } .jw-3-about-column { vertical-align: top; display: inline-block; border: 0px solid orange; width: 300px; height: 100%; margin: 10px 15px 10px 15px; } .jw-3-about-divider { display: inline-block; border: 0px solid green; width: 1px; height: 300px; margin: 0px 0px 0px 0px; background-color: rgba(0,0,0,0.5); position: relative; vertical-align: middle; } .jw-4-about-text-header { width: 100%; border: 0px solid green; margin: 20px auto 20px auto; font-size: 1.2em; font-weight: bold; font-style: italic; } .jw-4-about-text-body { width: 100%; border: 0px solid yellow; margin: 20px auto 20px auto; }</style> <div class="jw-1-about-centre-align"> <div class="jw-2-about-pad"> <div class="jw-3-about-column"> <div class="jw-4-about-text-header"> About me: </div> <!-- JUST SOME CODE FOR THE TEXT - OMITTED FOR SIMPLICITY --> </div> <div class="jw-3-about-divider"> </div> <div class="jw-3-about-column"> <div class="jw-4-about-text-header"> <b>Contact me:</b> </div> <!-- JUST SOME CODE FOR THE FORM - OMITTED FOR SIMPLICITY --> </div> <div class="jw-3-about-divider"> </div> <div class="jw-3-about-column"> <div class="jw-4-about-text-header"> <b>Email updates:</b> </div> <!-- JUST SOME CODE FOR THE FORM - OMITTED FOR SIMPLICITY --> </div> </div> </div> </!doctype>
  9. Hi Ingolme, thank you so much!
  10. Hi Everyone, When I click on the hyperlinks - text or image - on my site, the text or image shifts! This is driving me crazy! Please see what I mean here: http://www.jasonwangart.com/p/about.html Try clicking on the Facebook hyperlink icon, or the last sentence in the box. It also happens here: http://www.jasonwangart.com/search/label/illustration When I click on the "New "Drawing Camp Tutorial" in tutorials" hyperlink (third line from the top), or the images in the gallery, the text and the image shifts! Does anyone know what is causing this? Thank you. Jason <!doctype html> <style> .jw-1-about { width: 300%; border: 0px solid red; text-align: center; font-size: 16px; background-color: rgba(255,255,255,0.0); } .jw-2-about { width: 500px; padding: 10px 0px 10px 0px; border: solid rgba(0,0,0,0.2); border-width: 0px 1px 0px 1px; border-radius: 15px 15px 15px 15px / 30px 30px 30px 30px; margin: 0px auto 0px auto; text-align: center; font-size: 16px; background-color: rgba(255,255,255,0.3); } .jw-3-about-text-box { width: 75%; border: 0px solid black; margin: 18px auto 18px auto; { </style> <div class="jw-1-about"> <div class="jw-2-about"> <div class="jw-3-about-text-box"> <b> Hello visitors! </b> </div> <div class="jw-3-about-text-box"> I will post my most recent drawings on this website, and also on my Facebook page. </div> <div class="jw-3-about-text-box"> <a href="http://www.facebook.com/jasonwangart"> <img src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" width="35px" height="35px" alt="facebook"/> </a> </div> <div class="jw-3-about-text-box"> I hope you will enjoy looking at my drawings! </div> <div class="jw-3-about-text-box"> I live in Vancouver, Canada - on <a href="http://aaron-carapella.squarespace.com/fulltribalnationsmap/">Unceded Indigenous Coast Salish Territories on Turtle Island</a>. </div> </div> </div> </!doctype>
  11. Hi everyone, I am making a section of my webpage so that the image links will go from translucent to opaque during a cursor mouseover. However, there is an unintended effect - a little horizontal line (about 1 pixel by 5 pixels) appears at the lower right corner of the image link during the hover. Does anyone know how to make it so the little line does not appear? You can see the effect on http://www.jasonwangart.com - please see the top part of the sidebar, where the social media icon links are. I observed this effect on: Chrome 35.0.1916.114 Safari 7.0.4 (9537.76.4) Firefox 29.0.1 , all using Mac OS X 10.9.3 I have included an excerpt of the code I used below. I put this block of code inside a "HTML Gadget" in Blogger to create this part of the webpage. Thank you very much! Jason <!doctype html> <style> .jwsidebartopbox { /* code */ } .jwsidebartopbox:after { /* code */ } .jwblank1 { /* code */ } .jwsmlinksblock { /* code */ } img.opacify { opacity:0.4; } img.opacify:hover { opacity:1.0; } </style> <div class="jwsidebartopbox"> <div class="jwblank1"> </div> <div class="jwsmlinksblock"> Jason Wang Art is on: <br/> <br/> <a href="http://www.facebook.com/jasonwangart"> <img class="opacify" src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" width="30" height="30" alt="facebook"/> </a> <a href="http://twitter.com/jasonwangart"> <img class="opacify" src="http://4.bp.blogspot.com/-u9n6ecjgLqY/U4N0-QazobI/AAAAAAAAAaI/9gQByamXxak/s1600/LOGO+twitter+60+c.png" width="30" height="" alt="youtube" /> </a> <a href="http://plus.google.com/u/0/+jasonwangart1"> <img class="opacify" src="http://4.bp.blogspot.com/-Jc2l5PWP1Uo/U4N09HsH-SI/AAAAAAAAAZ0/e3YcGarRcwQ/s1600/LOGO+google++64+c.png" width="30" alt="google+" /> </a> <br/> /* code */ <br/> /* code */ <br/> </div> </div> </!doctype>
×
×
  • Create New...