I have got a list of events, onClick the elements expand and they SHOULD do the opposite on a second click. That is the part of my little script that does not work. WHY NOT??
window.addEvent('load',function() {
$$('.eventlistitempassive').each(function(item) {
item.addEvent('click',function() {
$$('.eventlistitemactive').set('class', 'eventlistitempassive block');
item.set('class', 'eventlistitemactive block');
});
});
$$('.eventlistitemactive').each(function(item) {
item.addEvent('click',function() {
item.set('class', 'eventlistitempassive block');
});
});
});
See the script in action at
http://hoch3.cc/index.php/aktuelles.html
Thanks,
PB
how about
window.addEvent('domready', function(){
$$('.eventlistitempassive').addEvent('click', function(){
this.toggleClass('bar');
});
});
http://jsfiddle.net/tofu/aUPtw/
The problem here is that there is no active element on window.load, so your second selector to add click events on each active item is not finding anything. So try this:
window.addEvent('load',function() {
$$('.eventlistitempassive').each(function(item) {
item.addEvent('click',function() {
$$('.eventlistitemactive').set('class', 'eventlistitempassive block');
item.set('class', (item.get('class') == 'eventlistitemactive block' ? 'eventlistitempassive block') : 'eventlistitemactive block');
});
});
});
greatings from austria ;)
Related
I have a button that opens up a pop-up window for a contact form, but the pop-up is not scrolling on mobile, so I was just thinking that it might be easier to change the button for mobile only. Is there a way to plug in some code to make this work for now?
The code for the button is:
<a class="book-now call-popup" href="booking-form.html" title="">Book Now</a>
where if I take out "call-popup" it disables the popup and takes you to the url. Any way to set this up so that on mobile the "call-popup" is turned off/disabled?
EDIT:
Added the following
function checkWidth() {
if ($(window).width() < 758) {
$('#popup').removeClass('call-popup');
} else {
$('#popup').addClass('call-popup');
}
}
$(window).resize(checkWidth);
and
<a id="popup" class="book-now" href="booking-form.html" title="">Book Now</a>
But it is not working. I mean, when I inspect the page, it IS working correctly, but it is still calling the popup even when the class has been removed for some reason. And strangely enough, it is working on my fiddle, but not my site:
http://jsfiddle.net/5SM9u/51/
EDIT 2: Since it was asked, here is the popup js
/*=================== Book Now Popup ===================*/
$(".call-popup").on("click", function() {
$(".booking-popup").fadeIn();
return false;
});
$(".booking-popup").on("click", function() {
$(this).fadeOut();
return false;
})
$(".popup-inner, .datepicker").on("click", function(e) {
e.stopPropagation();
});
$(".booking-popup .close-btn").on("click", function() {
$(".booking-popup").fadeOut();
});
/*=================== Popup ===================*/
$(".call-popup-alert").on("click", function() {
$(".popup").fadeIn();
return false;
});
$(".popup").on("click", function() {
$(this).fadeOut();
return false;
})
$(".simple-popup-inner").on("click", function(e) {
e.stopPropagation();
});
$(".popup .close-btn").on("click", function() {
$(".popup").fadeOut();
});
When you click on 'financial roadshows' for example, it opens. But when I click again, it closes temporarily and then opens again. I tried looking for the answer, but I'm just a gigantic noob when it comes to this one. I hope someone can help me out!
This is the code I used:
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
wrapper = $('#services_blocks'),
link = $(this);
$('.open_div.selected').next(".desc_div").slideUp('slow', function() {
$(this).prev().removeClass('selected');
});
link.addClass("selected").next(".desc_div").slideDown("slow");
});
});
and here is my JSfiddle:
http://jsfiddle.net/59f29b1L/
This can be done much easier with jQuery's slideToggle.
http://api.jquery.com/slidetoggle/
$(".open_div").click(function(){
$(this).next(".desc_div").stop().slideToggle( "slow" );
});
Try it out: http://jsfiddle.net/59f29b1L/6/
To fire the click event only once take a look at this answer.
<script>
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected');
$(this).addClass("selected").next(".desc_div").slideUp("slow", function() {
$(this).prev().removeClass('selected');
});
}
else{ $(this).addClass("selected").next(".desc_div").slideDown("slow");
}
});
});
</script>
Fiddle : jsfiddle
The drop down works here , hope it helps.
Changes :
$('.open_div.selected').next(".desc_div.down").slideUp('slow', function() {
$(this).prev().removeClass('selected');
$(this).removeClass('down').addClass('up');
});
link.addClass("selected").next(".desc_div.up").slideDown("slow", function() {
$(this).removeClass('up').addClass('down');
});
and also added a class in the html
<div class="desc_div up">
It can be done as simple as this!! Cheers..
jQuery(document).ready(function($){
$(".desc_div").hide();
$(".open_div").click(function(){
$(this).next().slideToggle("slow");
});
});
FIDDLE:
$('.open_div').click(function(){
$('.desc_div').toggle().toggleClass('selected');
});
i changed your fiddle over here: http://jsfiddle.net/59f29b1L/8/
first of all, you have to change the html.
make all open_divs wrap around your desc_div.
then use this code:
$(document).ready(function () {
$(".desc_div").hide(); // this is used to initally hide all desc_div
$(".open_div").click(function () { // define the click function
$(".desc_div", this).stop().slideToggle("slow"); //slide up/down depending on current state
});
});
you can change the line
$(".desc_div").hide();
to
$(".desc_div:gt(0)").hide();
Updated script of yours brother. I only add few changes on slide up script. Hope this will help.
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
wrapper = $('#services_blocks'),
link = $(this);
$('.open_div.selected').next(".desc_div").slideUp('slow', function() {
$(this).prev().removeClass('selected');
});
if($(this).next(".desc_div").css('display')=='none'){
link.addClass("selected").next(".desc_div").slideDown("slow");
}
});
});
DEMO FIDDLE
On One click of button, it shows the div and on another click it hides the div.
<button type="button" id="first">Click Me!</button>
<div id="something">Something</div>
<script>
$(document).ready(function(){
$('#something').hide();
$prevIndex = 0;
$i = 0;
$('#first').click(function(){
var index = $('#first').index($(this));
if(index == $prevIndex)
{ // if same
$i = $i;
}else{ // if not same
$i = 0;
}
if ($i % 2 === 0) {
/* we are even */
/* do first click */
$('#something').show();
} else {
/* we are odd*/
/* do second click */
$('#something').hide();
}
$i++;
$prevIndex = index;
});
});
</script>
I am trying to achieve the following behavior:
When link "Option" with DivA id is clicked, the DivB should show up with fade in effect. If I click the link "Option" again as well as if clicked anywhere else in the page except of the DivB inside, the DivB should dissapear again.
This is my HTML code:
Option
<div id="DivB">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
This is my JQuery code. It is wrong, if the DivB is hidden and I click anywhere in the document, the DivB appears.
<script type="text/javascript">
$(document).click(function () {
$("#DivB").fadeToggle("200");
});
$("#DivA").click(function () {
e.stopPropagation();
return false;
});
</script>
Where's the mistake? Thanks for help.
Live Demo
$(function() {
$(document).on("click",function (e) {
if (e.target.id=="DivA") {
$("#DivB").fadeToggle(200);
e.stopPropagation();
return false;
}
else if ($("#DivB").is(":visible")) {
$("#DivB").fadeOut(200);
}
});
});
<script>
$(document).on('click', function( evt ) {
evt.stopPropagation();
if ( evt.target.id == 'DivA' || $('#DivB').is(':visible'))
$('#DivB').fadeToggle();
});
</script>
Fiddle: http://jsfiddle.net/nR6e3/1/
$(document).on("click",function () {
if ($("#DivB").is(":visible")){
$("#DivB").fadeOut(200);
}
});
$("#DivA").click(function (e) { // you need place 'e'(for event handling)
$("#DivB").fadeIn(200);
e.stopPropagation();
return false;
});
$(document).mouseup(function(e) {
var container = $("your selector here");
// if the target of the click not the container or not a descendant of that container
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
sorry if this is a repost, I've looked around and cannot find a solution that works.
I have to radio buttons, and I want to execute a function when they are changed. From other posts I thought this should work
$(function() {
$("#isMale").change( function() {
alert("test");
location.href = 'http://google.com'
}
});
http://jsfiddle.net/BfMYF/1/
But it doesn't, can anyone help ?
The selector is wrong, but you need to close .change function brackets properly too:
$(function() {
$("input[name=isMale]").change( function() {
alert("test");
location.href = 'http://google.com';
});
});
$(function() {
$("#male,#female").change(function () {
alert("test");
location.href = 'http://google.com';
});
});
You also had a missing semi and paran!
I know that Chrome don't support onfinish event on marquee tag.
I decide to use JQuery plugin here: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
In this post, the author say it can capture stop event.
How ever, I cannot use it. Please help me out.
you should call .bind() for the the stop event. please see my example code below. hope it helps.
$(document).ready(
function(){
$('div.demo').marquee('pointer')
.bind('stop', function() {alert($(this).text())})
.mouseover(function () {
$(this).trigger('stop');
//alert($(this).html());
}).mouseout(function () {
$(this).trigger('start');
}).mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}
}).mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
}).mouseup(function () {
$(this).data('drag', false);
})
});