So I'm just trying to do a simple jquery effect but am having issues with the second part of the .hover function. Here's the code:
<div id="toprightboxes">
<ul>
<li><div id="login"><img src="img/login.png"/></div></li>
<li>info</li>
</ul>
</div>
<script>
$("#login").hover(
function () {
$(this).replaceWith('<div id="login"><img src="img/loginhighlight.png"/></div>');
},
function () {
$(this).replaceWith('<div id="login"><img src="img/loginhighlight.png"/></div>');
}
);
</script>
The first part of the hover works and the highlight image shows up but when I move off of the image nothing happens.
Ehm, its the same IMAGE you replace back...
Secondly why use jQuery for such a hover effect? You can easily do this with a:hover {} and pure CSS.
I think you have a typo — your event for mouseleave is the same as the one for mouseenter. Is this what you meant?
<div id="toprightboxes">
<ul>
<li><div id="login"><img src="img/login.png"/></div></li>
<li>info</li>
</ul>
</div>
<script>
$("#login").hover(
function () {
$(this).replaceWith('<div id="login"><img src="img/loginhighlight.png"/></div>');
},
function () {
$(this).replaceWith('<div id="login"><img src="img/login.png"/></div>');
}
);
</script>
If all you're doing is changing the image, though, you might want to consider using CSS instead.
Related
I'm creating a twitter-like app as a learning exercise and have the following at the beginning of my JS file:
$(function(){
setInterval(update, 3000);
$('.tweet li a.username').on('click', function() {
alert('hey!');
});
$('.showMore').on('click', function() {
moreIndex += 5;
update();
})
});
The alert() is filler for another function that I want to fire when the username is clicked. My generator is creating the following HTML for each tweet:
<ul class="tweets">
<ul class="tweet">
<li><a class="username" href="#">#jason:</a> tweet text </li><li class="date"> Date </li>
</ul>
</ul>
This is contained in a div with the class tweetDiv.
I've tried many selectors but am unable to get the alert to fire. Is my selector incorrect? Or is it something else?
It is something else. Your selector looks correct.
Most probably your code generates new tweets that don't have bound events. You should better use event delegation to fix that:
$('.tweets').on('click', '.tweet li a.username', function() {
alert('hey!');
});
Here .tweets element is supposed to be static and not regenerated dynamically.
First of all you need to make the wrapper function a self invoking function.
Moreover as you are binding a click even on 'a' tag hence you need to prevent its default behaviour.
Please refer to the fiddle
JS
(function () {
//setInterval(update, 3000);
$('.tweet li a.username').on('click', function (e) {
e.preventDefault();
alert('hey!');
});
$('.showMore').on('click', function () {
moreIndex += 5;
update();
})
})();
HTML
<ul class="tweets">
<ul class="tweet">
<li><a class="username" href="#">#jason:</a> tweet text</li>
<li class="date">Date</li>
</ul>
</ul>
I have a small list I made in behind code and I i have an onclick thats fired when a button is hit (used tag for buttons). I would like to know how to pass the object to my onclick function so I can toggle its class. So something likes this:
<script "text/javascript">
function navButtonClick() {
$(this).toggleClass("is-open");
alert("Yay!");
}
</script>
A person on another forum said that code should work but nothing seems to happen..
Here's what my behind code writes into the html:
<div id="sidebar">
<nav>
<h2>Sites</h2>
<ul id="navMenu">
<li class="toggle">Stanislaus
<ul class="subnav">
<li>Bob</li>
</ul>
</li>
</ul>
I'm assuming by the toggleClass that you're using JQuery, so you can just use .on('click') instead of trying to make it into a function call, but it'd be easier if you assign the toggle class to the a element instead of the li.
http://jsfiddle.net/22eYu/
$('a.toggle').on('click', function(){
$(this).toggleClass("is-open");
alert("yay");
});
Simply pass this to onclick and then use it in the function.
DEMO: jsfiddle
JS:
<script "text/javascript">
function navButtonClick(clicked) {
$(clicked).toggleClass("is-open");
alert("Yay!");
}
</script>
HTML:
<ul id="navMenu">
<li class="toggle">Stanislaus
<ul class="subnav">
<li>Bob
</li>
</ul>
</li>
</ul>
CSS:
.is-open{
background-color: red;
}
However, It appears you just need the following CSS:
CSS: In here just put your CSS class .is-open
a:visited {
background-color: red;
}
You may have scoping problems. Does this work?
<script "text/javascript">
window.navButtonClick = function(el) {
$(el).toggleClass("is-open");
alert("Yay!");
}
</script>
...
Stanislaus
...
I am currently working on building a small menu that will change divs based upon which one it clicked. So if one is clicked it will show the div associated with it and hide the others, ect. But I cannot get it to work, nor can I figure out why. Any help would be appreciated. Thanks.
Below is my code. I've clipped out the content as there was a lot of it.
<script type="text/javascript">
$('.mopHeader').click(function() {
$('#raid-progress-mop').show();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.cataHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').show();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.wotlkHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').show();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.tbcHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').show();
$('#raid-progress-vanilla').hide();
});
$('.vanillaHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').show();
});
</script>
<span class="h4">Raid Progress <span class="mopHeader">MoP</span> <span class="cataHeader">Cata</span> <span class="wotlkHeader">WotLK</span> <span class="tbcHeader">TBC</span> <span class="vanillaHeader">WoW</span></span>
<div id="raid-progress-mop">
<ul id="raid-mop">
<li>Content A</li>
</ul>
</div>
<div id="raid-progress-cata">
<ul id="raid-cata">
<li>Content B</li>
</ul>
</div>
<div id="raid-progress-wotlk">
<ul id="raid-wotlk">
<li>Content C</li>
</ul>
</div>
<div id="raid-progress-tbc">
<ul id="raid-tbc">
<li>Content D</li>
</ul>
</div>
<div id="raid-progress-vanilla">
<ul id="raid-vanilla">
<li>Content E</li>
</ul>
</div>
Wrap your code in:
$(function(){ ... });
...which is the short form of:
$(document).ready(function(){ ... });
Cheers
You need to put the script underneath your markup. Either that, or put it inside document.ready callback:
$(document).ready(function() {
// code here
});
The problem is that when the script appears above the markup, it will execute before the HTML is loaded, and so the browser won't yet know about raid-progress-mop, etc.
How about doing that a little more dynamically inside a ready() function :
<script type="text/javascript">
$(function() {
$('[class$="Header"]').on('click', function() {
var myClass = $(this).attr('class').replace('Header', '');
$('[id^="raid-progress"]').hide();
$('#raid-progress-' + myClass).show();
});
});
</script>
jsBin demo
Wrap your code into a ready finction and this code I wrote is all you need:
$(function(){
$('span[class$="Header"]').click(function(){
var classNameSpecific = $(this).attr('class').split('Header')[0];
$('div[id^="raid-progress-"]').hide();
$('#raid-progress-'+classNameSpecific).show();
});
});
Explanation:
$('span[class$="Header"]') = target any span element which class ends with Header
Now just attach a click handler to all that spans.
Than, to hide all your div elements do:
$('div[id^="raid-progress-"]').hide(); = will hide any div which id starts with raid-progress-
and than you just need to target the div that contains the magic word:
$('#raid-progress-'+classNameSpecific).show();
$('.mopHeader') isn't defined yet. wrap your script with $(function(){...})
I don't want to use the toggle, what would I need to use to get the following nav structure to stay put when main link is hovered over?
Current js:
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").toggle("fast");
});
});
</script>
Sample page
(Notice that when the submenu pops up, I cannot click on the links, as the submenu fades away)
If you aren't fussed about animation, and you wish to use JQuery you can toggle the CSS visibility rule on the class.
$(document).ready(function()
// Make sure the item is hidden initially, best to do
// this in CSS.
$(".servicesdropped").css("visibility", "hidden");
{
$(".downservices").hover(function()
{
$(".servicesdropped").css("visibility", "display");
},
function()
{
$(".servicesdropped").css("visibility", "hidden");
});
});
Using visiblity means the element will still consume the space it does in the DOM but does not display making sure the structure and positioning of other elements surrounding it are left in tact. The downside is that animations such as fadeIn() and fadeOut() will not work.
Your html markup architecture of menu should like this:
<ul>
<li class="downservices">GUYS
<div class="servicesdropped" style="display: none;">
<ul class="middle">
<h3>Shirts & Tanks:</h3>
<li>MuSkull</li>
<li>Bamboo Athletic Tank</li>
<li>Thin Strap Tank</li>
</ul>
<ul class="right">
<h3>Other Stuff:</h3>
<li>Shorties</li>
<li>Hoodies</li>
<li>Socks</li>
<li>Hats</li>
</ul>
</div>
</li>
<li>products</li>
<li>portfolio</li>
<li>contact</li>
</ul>
And in the script use this:
$(document).ready(function(){
$("li.downservices").hover(function()
{
$(this).find(".servicesdropped").slideDown("fast");
},
function()
{
$(this).find(".servicesdropped").slideUp("fast");
});
});
use like this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").slideDown();
});
});
</script>
for hover out the menu disappear use this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(
function(){
$(".servicesdropped").slideDown();
},
function(){
$(".servicesdropped").slideUp();
}
);
});
</script>
I want to design a menu that when I hover a link , the link pushed forward and when I move the mouse out of that , the link moves backward.
I know I can done that with .hover function.I don't want to use jQuery Events. I want to use just javascript events that they are embed in html tags.
here is my attempt:
<script type="text/javascript">
function MIn()
{
jQuery(this).animate({paddingLeft:"20px"},500);
}
function MOut()
{
jQuery(this).animate({paddingLeft:"0px"},500);
}
</script>
</head>
<body>
<ul>
<li onmouseover = "MIn()" onmouseout="MOut()" >Home</li>
<li onmouseover = "MIn()" onmouseout="MOut()">Download</li>
<li onmouseover = "MIn()" onmouseout="MOut()">Products</li>
<li onmouseover = "MIn()" onmouseout="MOut()"> Register</li>
<li onmouseover = "MIn()" onmouseout="MOut()">About</li>
<li onmouseover = "MIn()" onmouseout="MOut()">Contact</li>
</ul>
</body>
this inside your methods is not what you expect it, because you are not binding the calls to the element.. but instead are directly calling it in the window context.. this === window in your case..
You should do the binding with jQuery
$('li').hover(MIn, MOut);
and remove the onmouseover and onmouseout attributes..
demo http://jsfiddle.net/FydWH/
You couldnt use jQuery(this) in javascript function wout jQuery selector. You have to send element like this.
<script type="text/javascript">
function MIn(elm)
{
jQuery(elm).animate({paddingLeft:"20px"},500);
}
function MOut(elm)
{
jQuery(elm).animate({paddingLeft:"0px"},500);
}
</script>
</head>
<body>
<ul>
<li onmouseover = "MIn(this)" onmouseout="MOut(this)" >Home</li>
<li onmouseover = "MIn(this)" onmouseout="MOut(this)">Download</li>
<li onmouseover = "MIn(this)" onmouseout="MOut(this)">Products</li>
<li onmouseover = "MIn(this)" onmouseout="MOut(this)"> Register</li>
<li onmouseover = "MIn(this)" onmouseout="MOut(this)">About</li>
<li onmouseover = "MIn(this)" onmouseout="MOut(this)">Contact</li>
</ul>
</body>
You need the event handers to be on the A-tag, not the LI. You also need to make your A-tags display:block or display:inline-block in order for them to use padding.
You use jQuery, why not the event api?
$(document).ready(function() {
$('li').hover(function() {
// onmouseover
$(this).animate({'padding-left': '20px'}, 500);
}, function() {
// onmouseout
$(this).animate({'padding-left': 0}, 500);
});
});
This code work well, a live example: http://jsfiddle.net/HXpPF/2/
The stop() function is to stop the animation if the cursor goes of the li.
If you now for some reason really don´t want to use event binding you could pass the referens to the current element as a parameter/argument this way;
HTML
<li onmouseover = "MIn(this)" onmouseout="MOut(this)" >Home</li>
Javascript
function MIn(el) {
jQuery(el).animate({paddingLeft: "20px"}, 500);
}