I am having a really hard time getting the mouseover to work in javascript with my navigation bar. I have made some changes but still not working.
<div class="left_side">
<ul id="nav">
<li>Home</li>
<td
onmouseover="document.getElementById(
'b1')src.'button1over.png'"
onmouseout="document.getElementById(
'b1')src.'button1up.png'"
<li>Our Team
<ul>
<li>Faculty
<li>Fellows
</ul>
</li>
b1')src.'button1over .. should be b1').src='button1over
Make sure to correct the onmouseout event as well..
Related
It looks like mmenu does not link to any ID on the same page. Perhaps I am doing something wrong. Any help is appreciated!
Codepen
Open the menu
<div id="my-header"></div>
<div id="my-content"></div>
<div id="my-footer"></div>
<nav id="my-menu">
<ul>
<li>Pink</li>
<li>Orange</li>
<li>Tomato</li>
<li>External link works</li>
</ul>
</nav>
It seems you are looking for the page-scroll-addon: http://mmenu.frebsite.nl/documentation/addons/page-scroll.html
I'm using jquerymobile 1.4.0 and have a listview menu that contains thumbnail images (divl1star, divl2star etc...)
I would like to change the thumbnail source based on a series of criteria.
My issue is that I cannot see how to change the thumbnail. I am trying to change modify the 'src' attr as seen in the script at the end of the code but this fails to work. No error is seen in the console. I feel this resolution is quite simple and am thinking that the way I'm trying to access the img src is incorrect.
Any help is greatly appreciated.
<div data-role="page" id="mainmenu" data-theme="a">
<ul data-role="listview" data-inset="true" id="divIdlevelList">
<li data-icon="false" id="listL1"><img id="divl1star" src="../img/icons/star0.png" class="ui-li-thumb"><h3>l1</h3><p>l1text</p></li>
<li data-icon="false" id="listL2"><img src="../img/icons/star0.png" id="divl2star" class="ui-li-thumb">l2<p>l2text</p></li>
<li data-icon="false" id="listL3"><img src="../img/icons/star0.png" id="divl3star" class="ui-li-thumb">l3<p>l3text</p></li>
<li data-icon="false" id="listL4"><img src="../img/icons/star0.png" id="divl4star" class="ui-li-thumb">l4<p>l4text</p></li>
<li data-icon="false" id="listL5"><img src="../img/icons/star0.png" id="divl5star" class="ui-li-thumb">l5<p>l5text</p></li>
</ul>
<script>
$("#divl1star").attr('src', '../img/icons/star2.png');
</script>
</div>
Silly mistake was in my code, pointed out by Omar. I used #div1star rather than #divl1star.
I've looked around and tried the suggestions to center an image, and it usually works just fine, but I've got a situation where something isn't right.
If you go to the test page:
http://www.503rephotography.com/_temp/ - you will see the image is pushed to the right a little bit, and if you increase or decrease the size of your screen, you will see it may shift a little further away from the center position.
I'm new to CSS and may have something messed up that is making this not work; I used some tips on here to make the div with the content on the page be somewhat centered. Now I'm just trying to center an image within that div box. Any help is much appreciated!!
You have to create a div container with margin-left:auto: and margin-right:auto; to center the content.
<div id="container">
<div id="header">
<h1 id="logo">
<a href="http://www.503rephotography.com">
<img src="images/logo.png" alt="503 rephotography">
</a>
</h1>
<ul class="navbar">
<li class="button">SERVICES</li>
<li class="button">PORTFOLIO</li>
<li class="button">CONTACT 503</li>
</ul>
</div>
<div id="topbar"></div>
<div id="content">
<img src="http://www.503rephotography.com/_temp/slides/1.jpg">
<div class="sub">
<p>Content will go here....why can't I get this div box to be centered???</p>
</div>
</div>
</div>
Try this fiddle see if it's what you need: http://jsfiddle.net/ftPa3/
Building a jQuery Mobile app in DreamweaverCS6. Have a an ul with multiple links calling html pages each hold a quiz. The "quiz" page is a jqm page with a javascript file doing all the work of the quiz. Everything works fine, but when you click on the li quiz button to load the page it takes a little while to load and the ajax loading spinner is not showing up. This is a problem because you don't know if the app has frozen or not. Any thoughts on how to force the spinner to show while loading the page?
<div data-role="content">
<ul data-role="listview">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Quizzes</li>
<li>Quiz 1</li>
<li>Quiz 2</li>
<li>Quiz 3</li>
You can use the
$.mobile.showPageLoadingMsg();
and
$.mobile.hidePageLoadingMsg();
You can refer http://jquerymobile.com/demos/1.2.1/docs/config/loadingMessageTextVisible.html for proper usage.
You can reduce the page loading speed by actually writing the contents of each pages in particular div tags like :
<div data-role="page" id="quiz1">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
You can load this page as :
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Quizzes</li>
<li>Quiz 1</li>
<li>Quiz 2</li>
<li>Quiz 3</li>
</ul>
This will greatly reduce the page loading time and speed up your app.
The way you have your code, those links will do a full refresh, abd not showing the jqm spinner.
What you can do is change a page programatically, which uses the jqm spinner for transitioning pages. More info http://jquerymobile.com/demos/1.2.1/docs/api/methods.html - changePage ($.mobile.changePage())
The idea is to have yours as follows:
<li><a class="quiz1">Quiz 1<a><li>
<script>
$(document).on('pageinit', '.quiz1', function() {
$.mobile.changePage('quiz1.html');
});
</script>
hope you get the idea...
I know there are many great helpers on this site, I am still learning jquery, but I love the functionality behind it. Recently I created a megadrop down menu, but I started getting a lot of recommendations to use the hoverintent plugin instead of using show/hide. I am lost trying to change my coding around to get it to work...PLEASE HELP...THANKS AS ALWAYS GUYS AND GALS!!!
OH and I think that changing to hoverintent will stop the overflows from building up too, but I do not think my code is working to stop that from happening?
My site...only the About DKE dropdown works...
http://www.nestudiosonline.com/test.php
my jquery script...
$(document).ready(function() {
// shows the hidden div in the list
$('#dave').mouseover(function() {
$('#aboutdke').show('slow');
});
// hides the hide the div again for that list item
$('#dave').mouseleave(function() {
$('#aboutdke').hide('slow');
});
});
Here is my html....
<div id="pagelinks">
<ul id="menu">
<li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
<li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a><div id="aboutdke">
(about dke div content)
</div>
</div></li>
<li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
<li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
<li class="megamenu"><a class="links" href="#">EVENTS</a></li>
<li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
<li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
</ul>
</div>
Two things before I get to the real answer:
You're missing the opening body tag after your doctype.
Only lowercase tags are valid in XHTML.
The events are only triggered for #aboutdke because that's the one element you have hardcoded into the event callback functions. Try something more abstract:
$('#menu > li').mouseover(function() {
$(this).children().is('div').show('slow');
});
$('#menu > li').mouseleave(function() {
$(this).children().is('div').hide('slow');
});
This should (if memory serves) work for every menu item.