I have this bit of code to hide/show a tray from the bottom of the page. It works great everywhere but Firefox. In devtools it doesn't show an event listener on .toTab -- until you refresh the page. After refreshing everything works fine.
$(function(){
$('.toTab').click(function(event){
var currentHeight = ($('#toOfferContainer').height()*(-1))+90;
$(this).toggleClass('showOffers');
$('.toOverlay').toggleClass('shown');
if ($(this).hasClass('showOffers')) {
$('#toOfferContainer').animate({bottom:'-2px'},500);
} else {
$('#toOfferContainer').animate({bottom:currentHeight},500);
}
});
});
Clicking on .toTab just doesn't register anything -- not even any messages in console.
Any tips on what I might need to adjust?
EDIT: Here's the relevant HTML:
<div id="todaysOffers">
<div class="toOverlay">
<div id="toOfferContainer">
<div class="toTab">
<img src="image.png" />
</div>
<div class="toContent">
<a href="/link" class="someLink">
<img src="image2.jpg" />
</a>
</div>
</div>
</div>
</div>
Related
I have some HTML that should respond to user interaction. It is a page that I am trying to get to work offline. After I load the page while online I end up with fully rendered HTML. Some of the HTML contains show/hide functionality, and is meant to prevent deafult action of an element click. For instance, see this:
<div id="area49253971_6938" class="component interaction-component float-none clear-none interaction_booted">
<div role="status" class="int-prep hidden"><i aria-hidden="true" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><br> Loading interaction...</div>
<div>
<div class="data-field interaction-type">RevealContent</div>
<div class="interaction_title"></div>
<div class="interaction_content RevealContent" style="min-height: 400px; width: 400px;">
<div class="pointer">
<td>
<div id="area49253971_6940" class="component image-component float-left clear-none booted"><img src="somelink" height="50" width="30" title="" alt="" style="padding-right: 10px;"></div>
<p class="body" id="area49253971_6941"><em><strong>Some question</strong></em></p>
</td>
</div>
<div style="display: block;">
<td>
<p class="body" id="area49253971_6942"><strong>Some answer</strong></p>
</td>
</div>
</div>
<div class="interaction_data" style="display: none;">
<div id="area49253971_6939" class="component table-component float-none clear-none ">
<div class="component_caption"></div>
</div>
</div>
</div>
</div>
The app's code is not working offline (I think due to app's ajax calls and a bunch of other dependencies and app-specific stuff). (By the way, you can see the app code I am trying to rewrite into pure jQuery here: https://jsfiddle.net/0s6xdk9q/1/). So I decided to rewrite the app functionality like so:
$(document).ready(function() {
$(this).on('click', '.interaction_booted', function () {
interactionData = $(this).find(".interaction_data");
this.container = $(this).find(".interaction_content");
var contentToReveal = ($(this).find('.RevealContent')).children()[1];
var initialContent = ($(this).find('.RevealContent')).children()[0];
$(contentToReveal).slideToggle('slow');
var a = initialContent.find('a');
a[0].addEventListener("click", function(e){
e.preventDefault();
}, false);
});
});
Something is not quite right. Maybe because I have multiple click events. In any case, I confirmed by stepping through the code in Chrome that the variable a is indeed the element I expect. All element selectors are working fine. But nothing I do is resulting in this preventDefault from working. I have a feeling there is a simple answer, just not seeing it. Also, I am trying to do this in a way that doesn't require me to add anything to the HTML.
Thoughts?
thanks,
Brian
Im working on a flipbook, and im trying to make my script load when second pages is visible. What i have tried right now is
With if ($('#bubble').is(':visible')) added the bubble script still loads even when i am not on the right page.
Javascript
if ($('#bubble').is(':visible')) {
$(document).ready(function() {
$('.small').fadeOut(1);
$('.small').removeClass('hidden');
$(".small").delay(1000).fadeIn(2000);
});
$(document).ready(function() {
$('.big').fadeOut(1);
$('.big').removeClass('hidden');
// $('.big').fadeIn(1500);
$(".big").delay(2000).fadeIn(2000);
});
$(document).ready(function() {
$('.test').fadeOut(1);
$('.test').removeClass('hidden');
$(".test").delay(3000).fadeIn(2000);
});
}
HTML
<div class="bb-item" id="bubble">
<img class="fixedsize" src="images/1.png" alt="image02" /></a>
<div class="test">
<div class="oval-thought">
<p>Text inside bubble</p>
</div>
</div>
<div class="small">.</div>
<div class="big">.</div>
</div>
I have a form index.asp
<div class="wrapper pop-up" id="pop_up" style="display:none;"></div>
<div class="log_in">
Login
</div>
Login.asp
<div class="authorize" id="authorizeID" >
<a href="#" id="authorize-closeBut" class="authorize-close">
<img src="img/icons/cross.png" />
</a>
<div id="response"> </div>
<div class="authorize-footer">
ForgotPassword
Registration
</div>
</div>
ForgotPassword.asp
<div class="authorize" id="passremainderID" >
<a href="#" id="passremainder-closeBut" class="authorize-close">
<img src="img/icons/cross.png" />
</a>
</div>
I have a javascript
$(".LogInBut").on('click', function(e) {
e.preventDefault();
$.get($(this).attr('href'), function(data) {
alert($('#pop_up').length);
if ($('#pop_up').length) {
$('#pop_up').html(data).show(function() {
$('.authorize-close').click(function(e){
e.preventDefault();
if ($('#pop_up').length) {
$('#pop_up').html("");
$('#pop_up').hide();
}
});
});
}
});
});
So if i insert this javascript into Index.asp page and click #LogIn, I got pop-up window with Login.asp and once alert($('#pop_up').length);, if i click on .authorize-close windows will close. If i click #LogIn again i got the same but alert($('#pop_up').length); appears twice and so incrementing each time i click #LogIn.
So how to prevent incrementing and show only once this alert?
Everytime you click the button.. you are creating a new event click for #pop_up
$('.authorize-close').click(function(e){
Its showing twice, because you created the event twice. you need to delete the old event, than create again.. change the line to:
$('.authorize-close').unbind('click').bind('click',function(e){
I have a banner which I need changing on a click. at the moment I have hidden the 2nd banner and currently banner 1 shows. When I click the arrow I want banner 1 to hide and banner 2 to show etc.. only problem I tried using html.
<div class="homeArrow"><img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt=""/></div>
i want homeArrow to be the click button to show next banner
but not sure how to connect to jquery...
This is JS fiddle:
http://jsfiddle.net/8a7GL/152/
Hide / Show one Banner at a time:
$(".homeArrow").on('click',function () {
$(".homeImage").slideToggle();
});
http://jsfiddle.net/8a7GL/152/
Sliding from left to right can be achieved by a little more code in jQuery see:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
You could also use addClass/removeClass and make the sliding CSS3 transitions. This would greatly improve quality.
UPDATE:
Here is the left / right slidy.
HTML:
<div class="homeBannerContainer" style="display: block">
<div id="a1" class="homeImage">
<h4>Banner 1</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner">
<h3>My banner</h3>
</div>
</div>
<div id="a2" class="homeImage" style="display: none">
<h4>Banner 2</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner" style="display: none">
<h3>My banner 2</h3>
</div>
</div>
<div class="homeArrow">
<img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt="" />
</div>
CSS:
$(".homeArrow").on('click', function () {
$('.homeImage').animate({
width: 'toggle'
});
});
DEMO:
http://jsfiddle.net/8a7GL/174/
You can use the show/hide function provided by jquery and even give it an animation.
Just give the banners a selector and use the .click event.
http://api.jquery.com/toggle/
function change(){
$("#firstbanner").toggle();
$("#secondbanner").toggle();
}
In HTML:
<button onclick="change()" />
try this:
if ($('#Banner2Home').is(":visible")) {
$('#Banner2Home').hide();
} else {
$('#Banner2Home').show();
}
return false;
I have a banner made out of JavaScript wherein when you hover a particular text the image in the banner changes.
I was wondering how to make it compatible in ie8..
I used this tutorial to come up with the js:
http://www.javascriptkit.com/script/script2/rolldifferent.shtml
I'm also trying to mouse out too then the image will change.
Here are the js codes:
<script type="text/javascript">function changeimage(towhat,url){if (document.images){document.images.targetimage.src=towhat.src gotolink=url}}functionwarp({window.location=gotolink}</script>
<script>var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=newImage()myimages[i].src=preloadimages.arguments[i]}}preloadimages("map_wm_hover.gif", "map_wm_hover2.gif","map_wm.gif")</script>
Here is the css:
<div id="base"><div id="mapcontainer"><img src="map_wm.gif" name="targetimage" border=0></div>
<div id="textcontainer"><div class="textboxinner1">8CCC REQUESTS/TALKBACK</div>
<div class="textboxinner2">Alice Springs 8952 7771</div>
<div class="textboxinner2">Tenant Creek 8952 7182</div>
<div class="textboxinner3"><span class="t3nonelink">...other contact details here</span></div>
I believe this is an issue with IE where animated gifs are not loaded properly in javascript. A workaround is to put the images in a hidden div in the HTML code instead of loading them in the script. A positive side-effect is that this greatly simplifies the javascript. See http://jsfiddle.net/5pZLT/7
HTML:
<DIV id=base>
<DIV id=mapcontainer><IMG border=0 name=targetimage src ="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif"> </DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1><A onmouseover=changeimage(2,this.href)
href="index.html">8CCC REQUESTS/TALKBACK</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(1,this.href)
href="index.html">Alice Springs 8952 7771</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(0,this.href)
href="index.html">Tenant Creek 8952 7182</A> </DIV>
<DIV class=textboxinner3><SPAN class=t3nonelink>...other contact details <A
onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV></DIV></DIV><div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
By the way there were lots of ;s missing in your original code which would tend to stop it working.