this is what i have so far - i'm trying to get the text only to show when the 'timelineTile' is made bigger..
$(function () {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if($('.selected').children().hasClass("clicked")){
$('.details').addClass('show');
}
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
});
});
fiddle also
Add the following css as well to show text only when box is bigger
.timelineTile table{
display: none;
}
.timelineTile.clicked table{
display: block;
}
http://jsfiddle.net/devools/gjyksjuh/1/
try that fiddle?
$(function () {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if($('.selected').children().hasClass("clicked")){
$('.details').removeClass('show');
$(this).children('.details').addClass('show');
}
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
});
});
Related
So I have this code
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn().siblings('.popup').hide();
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
But I'm not quite sure how to animate it. What I want to do is when you click a link, the div fades in (it works), but when you click the related links, I don't want the box to fade out and in again (except for the texts inside it though).
Here's the fiddle
Thanks! x
Hope this works for you
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn(function(){
$(this).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the updated fiddle
To get this to fade properly both ways I think you need to play with the z-index:
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).css('z-index', 1).fadeIn(function(){
$(this).css('z-index', 0).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the fiddle
I want dropdown-menu to appear on mouse hover. Here is jsbin of my code: link
Tried jquery:
$('.dropdown-toggle').hover(
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}
);
$('.dropdown-menu').hover(
function() {
$(this).stop(true, true);
},
function() {
$(this).stop(true, true).delay(200).fadeOut();
}
);
But it is not working...
In Bootstrap Dropdown with Hover this is fixed using CSS instead of JavaScript. If you change the solution of the accepted answer into
.navbar .btn-group:hover > .dropdown-menu {
display: block;
}
it should work with your example code.
You can use inner Bootstrap API:
$(document)
.on('hover', '.dropdown-toggle', Dropdown.prototype.toggle)
Try this
jQuery(function ($) {
$('.navbar .dropdown').hover(function () {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function () {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function () {
location.href = this.href;
});
});
I'd like to optimize this script on multiple div's.
Now is working, but for single div.
$(document).ready(function(){
$(".hideDiv").hide();
$(".buttonshow").show();
$('.buttonshow').click(function(){
$(".hideDiv").slideToggle();
$(".buttonshow").hide();
});
$('.buttonhide').click(function(){
$(".hideDiv").slideToggle();
$(".buttonshow").show();
});
});
DEMO
Try:
$(document).ready(function () {
$(".hideDiv").hide();
$('.buttonshow').click(function () {
$(this).next(".hideDiv").slideToggle();
$(".buttonshow").hide();
});
$('.buttonhide').click(function () {
$(this).parent().slideToggle();
$(".buttonshow").show();
});
});
jsFiddle example
JQuery:
$(".hideDiv, .buttonshow").toggle();
$('.buttonshow').click(function(){
$(".hideDiv, .buttonshow").slideToggle();
});
$('.buttonhide').click(function(){
$(".hideDiv, .buttonshow").slideToggle();
});
CSS:
.hideDiv{
display: block; } .buttonshow {
display: none; }
DEMO
Here, i am beginner in jquery and i am building a web page in which i am facing an issue.
in this, when i click the article1 or article2 then section and page click event are automatically called. i want to stop calling them.
here is page.html
<div id="page">
<div id="section">
<div id="article1">this is article 1</div>
<div id="article2">this is article 2</div>
</div>
</div>
here is page.js
$('#page').on('click', function () {
alert('page');
});
$('#section').on('click', function () {
alert('section');
});
$('#article1').on('click', function () {
alert('article1');
});
$('#article2').on('click', function () {
alert('article1');
});
here is page.css
#page {
height: 600px;
width: 600px;
background-color:brown;
}
#section {
height: 100px;
width: 100px;
background-color:red;
}
#article1 {
background-color:green;
}
#article2 {
background-color:yellow;
}
please suggest any solution.
Thanks in Advance.
Use evt.stopPropagation():
$('#page').on('click', function (evt) {
evt.stopPropagation();
alert('page');
});
$('#section').on('click', function (evt) {
evt.stopPropagation();
alert('section');
});
$('#article1').on('click', function (evt) {
evt.stopPropagation();
alert('article1');
});
$('#article2').on('click', function (evt) {
evt.stopPropagation();
alert('article1');
});
JSFiddle
using
event.stopPropagation();
here is a jsfiddle.
http://jsfiddle.net/Lsn8n0yp/
use stopPropagation() man.
$(document).ready(function(){
$('#page').on('click', function (e) {
e.stopPropagation();
alert('page');
});
$('#section').on('click', function (e) {
e.stopPropagation();
alert('section');
});
$('#article1').on('click', function (e) {
e.stopPropagation();
alert('article1');
});
$('#article2').on('click', function (e) {
e.stopPropagation();
alert('article1');
});
})
I got a way to solve my problem in my navigation of my site http://204.197.252.143/~paterson/ , that when I hover the link (li-element) the background will set into gray and the background-image (cross sign) of the previous element will hide also. My question is, Is there another way to make it dynamically? This is my code. Any help are appreciated.
<script>
$(document).ready(function () {
$("li#menu-item-21").hover(function () {
$("li#menu-item-23").css("background", "transparent");
});
$("li#menu-item-21").mouseleave(function () {
$("li#menu-item-23").css("background", "url(http://site.com/
~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});
</script>
<script>
$(document).ready(function () {
$("li#menu-item-23").hover(function () {
$("li#menu-item-22").css("background", "transparent");
});
$("li#menu-item-23").mouseleave(function () {
$("li#menu-item-22").css("background", "url(http://site.com/
~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});
</script>
<script>
$(document).ready(function () {
$("li#menu-item-23").hover(function () {
$("li#menu-item-22").css("background", "transparent");
});
$("li#menu-item-23").mouseleave(function () {
$("li#menu-item-22").css("background", "url(http://site.com/
~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});</script>
<script>
$(document).ready(function () {
$("li#menu-item-20").hover(function () {
$("li#menu-item-96").css("background", "transparent");
});
$("li#menu-item-20").mouseleave(function () {
$("li#menu-item-96").css("background", "url(http://site.com/
~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});</script>
<script>
$(document).ready(function () {
$("li#menu-item-19").hover(function () {
$("li#menu-item-20").css("background", "transparent");
});
$("li#menu-item-19").mouseleave(function () {
$("li#menu-item-20").css("background", "url(http://site.com/
~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});</script>
<script>
$(document).ready(function () {
$("li#menu-item-96").hover(function () {
$("li#menu-item-21").css("background", "transparent");
});
$("li#menu-item-96").mouseleave(function () {
$("li#menu-item-21").css("background", "url(http://site.com/~paterson/
wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});
</script>
like #juno said.. why not use css?
for example:
li:hover{ attributes to change }
You can use .hover() and .prev() in jQuery to do this.
Here's the code:
<script>
$(document).ready(function () {
$("li.menu").hover(function () {
$(this).prev().css("background", "transparent");
}, function(){
$(this).prev().css("background", "url(http://site.com/~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});
</script>
rejig your html a little so that the background image appears to the left the li. Something like:
# put the background image on the left of the LI's
.nav-menu li { background: url("http://204.197.252.143/~paterson/wp-content/themes/patersons/img/cross.png") no-repeat center left;
# remove the background image from the first element
.nav-menu li:first-child { background: none }
#when you're hovering, remove the background
.nav-menu li:hover { background: transparent; }
Something like that will work without any JS.
edit:: when you come to launching, make sure your image paths are relative from the CSS document - url(../img/cross.png) - rather than hardcoding to the IP address.