I tried some old answers from other questions, but none of them resolved my case. The toggle function is not working fro me. Below is the jquery:
jQuery(document).ready(function($) {
$(".team-member").click(
function() {
$(this).children(".description").toggle();
}
);
});
HTML:
<div class="team-member" data-style="meta_below">
<img alt="yes" src="source/to/img.jpg" title="Candice Rauter">
<h4 class="light">Name</h4>
<div class="position">Position Goes Herer</div>
<p class="description">blablabla</p>
</div>
Link for the section of the website(#our-team section).
Any help would be appreciated!
Thanks!
When you inspect your site on mobile, using sdk and Chrome, you get
Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
warnings on your page.
Try using .on('click') rather than .click()
$(".team-member").on('click', function(){
$(this).children(".description").toggle();
});
This should work even for dynamically added elements. And I think your page is using ajax to load its content (from what I can see in the inspector).
Related
I'm working on a cordova project. I have a few links which have a listener, the href is set to "#".
Now in all my functions I'm providing the event and calling preventDefault().
For some reason (when visiting the app in browser). It will still navigate to /#.
Which causes the browser to open a new tab.
I used javascript:void(0) before which works perfectly, but it throws a list of errors on windows phone (metro app). since javascript: is not valid.
Anyone know how I should be able to solve this? (i'm using jQuery and simple HTML5 for this one).
e.g.:
/**
* Toggle the menu
*/
toggleMenu: function(e) {
if (e) {
e.preventDefault();
}
App.Core.menuOpen ? App.Core.hideMenu() : App.Core.showMenu();
return false;
},
So we bind the event like this, so when it's dynamically added it still works.
$(document).on("click", ".header-menu", App.Core.toggleMenu);
html with some strips
<div class="page" data-init="App.Functions.Purchase.init()">
<div id="panel-purchase" class="panel" data-init="App.SomeModule.init()">
<div class="panel-header">
<div class="panel-header-inner">
<span class="icon icon-menu"></span>
<div class="panel-header-title"><span>Some Title</span></div>
<span class="button dummy"></span>
</div>
</div>
...
As long as I don't get a better solution, for now I'm using no href
it's a standard in HTML5, allthough some sites complain it could target to itself. It works fine for a hybrid app, and I've never seen it targeting to itself in this case.
Better solutions are always better, there must be something nasty in the source (It's initially created by a third party).
I have one HTML file as shown below:
<html>
<head><title>jQuery beginner</title></head>
<body>
<div id='my_div'>Some random generated value</div>
<button id="submit_button">submit</button>
</body>
</html>
I want to keep <div id="my_div"> element hidden until <button id="submit_button"> is clicked.
So in my Javascript file I wrote following code:
$(document).ready(function() {
$('#my_div').hide();
});
$('#submit_button').click(function() {
$('#my_div').show();
});
This script and HTML is working fine in Google Chrome and surprisingly it works in Internet Explorer 9 also but doesn't work in Firefox.
I read some other questions on SO and tried alternatives like
$('#my_div').css('display','block'),
$('#my_div').css('display','inline-block'),
$('#my_div').css('display','block-table'),
$('#my_div').attr('style','display:block')
but none of the above solution is working in Firefox.
Is there any solution to this problem?
One more thing I observed is, if I keep the div visible at page load time and later using button click event toggle it's display, it works.
Any clue why this is happening only in Firefox?
But you missed to try this :)
That is, wrapping the event binding code into the doc ready handler.
$(document).ready(function() {
$('#my_div').hide();
$('#submit_button').click(function() {
$('#my_div').show();
});
});
Wrap your code inside ready handler:
$(document).ready(function() {
$('#my_div').hide();
$('#submit_button').click(function() {
$('#my_div').show();
});
});
I'm looking for an Event which is triggered as soon as an Element (inline sharing buttons) scrolls out of page. I'd like to use this to trigger the drop in of social sharing buttons from the bottom of the page. You may have seen such side behaviour already on buzzfeed.com on mobile devices. If the sharing buttons come back in, the bottom sharing buttons should fade out again.
I'd prefer to only use CSS3 however I think some js (jQuery) may be necessary.
Anyone knows a library or some lines of code doing this?
Thx I really appreciate your expertise!
You could try like this
JS:
$( window ).scroll(function() {
if($( window ).scrollTop() >= socialButton.offset().top + socialButton.outerHeight())
hiddenSocialButton.stop().animate({'bottom': 0}, 100);
else
hiddenSocialButton.stop().animate({'bottom': -hiddenSocialButton.outerHeight()}, 100);
})
jsfiddle demo
Please refer to this question. Used the reference to code this
HTML :
<div class="container">
<div class="social_links">Social Links</div>
<div class="bottom_links">Bottom Links</div>
</div>
JS :
function triggerFunction()
{
if(isScrolledIntoView('.social_links'))
{
$('.bottom_links').fadeOut();
}else{
$('.bottom_links').show();
}
}
DEMO HERE
I've created an html page that looks like that:
<body>
...
<div id="calendar-cont">
...
<div id="overview">
<div id="overview-type">
<h3>Selected Shift Type</h3>
<div id="selected-shift-type-cont"></div>
</div>
<div id="overview-dates">
<h3>Selected Dates</h3>
<ul id="selected-dates-cont"></ul>
</div>
Submit
</div>
</div>
</body>
I also have a jQuery click listener for the tag:
$("#submit-overview").click(function() {
console.log("click");
submitDates();
});
This listener works as long as the DOM stay the way it is now. Whenever I add an element to the selected-shift-type-cont or the selected-dates-cont the listener does not work anymore. Does anyone has an idea why this problem occurs?
I add elements this way:
var tmp = new Date(date.getTime());
dates[dates.length] = tmp;
$("#selected-dates-cont").append("<li>" + getDateString(tmp, "dd.mm.yyyy") + "</li>");
and
$("#selected-shift-type-cont").html("<div>" + shiftType.name + "</div>");
As soon as one of these two pieces of code are executed, I cannot click the anchor anymore.
Update:
I use jQuery 1.9.1. Also I use Chrome (version 28.0.1500.71) for developing. When I test it on Firefox 22 everything works as expected. Since I use the jQuery .load() method to change the main content according to what the user clicked in the navigation bar. Therefore I need to run the website on localhost which I do using the python -m SimpleHTTPServer 8001 command on my Mac. This command starts a webserver from the directory I called that command. Is it possible one of these factors might be the problem
Update 2:
I did not mention until now that I use the fullCalendar jQuery plugin. I also created a jsFiddle that reproduces the problem http://jsfiddle.net/XagK5/3/. It contains all important parts, I also included the whole fullCalendar minified javascript code, because I did not know how to include an external script.
Update 3:
It does work if I add the following CSS:
#submit-overview {
position: relative;
z-index: 99;
}
http://jsfiddle.net/72wyN/1/
Everything works for me with FF 22.
You must be using an older (read: obsolete) version of jQuery or your code is doing more than you showed us or your browser is defunct. Please elaborate further.
$("#submit-overview").click(function() {
console.log("click");
alert("still works");
});
window.setInterval(function() {
$("#selected-dates-cont").append("<li>1/1/2000</li>");
$("#selected-shift-type-cont").html("<div>blah</div>");
}, 4000);
I have somesthing strange happen here.
I got the following directive:
app.directive('addscroller', function () {
return function (scope, elm, attrs) {
// jQuery Script triggern
// AngularJS: jQuery(selector) = element.
elm.ready(function () {
elm.nanoScroller({ alwaysVisible: true });
})
}
});
I'm adding it to this code:
<div ng-show="datenschutz" class="alldealermodal">
<p ng-show="loading">Loading...</p>
<div>
<h1 class="headline">DATENSCHUTZ</h1>
<div class="closebtndiv">Close</div>
<div class="clear"></div>
<div class="nano" addscroller>
<div class="content"><p>BIG LONG TEXT</p></div>
</div>
</div>
<div class="fadeout"></div>
</div>
On click on this link,
<p>Datenschutz</p>
it opens the overlay "datenschutz" as seen above (ng-show="datenschutz"). The toggle works great BUT....
When I directly open the div after the page shown up, I see the scroller loading and appearing fine. It works.
But If I wait some moments, just a few seconds and then I open the "datenschutz"-overlay, the scroller isn't loaded and doesn't load at all.
I have something similar for a second overlay and this happens too.
EDIT / UPDATE:
I figured out, that the problem is, that jQuery cannot apply the script to an element which is hidden. When I quickly open the div before the $last element in the ng-repeat (inside the div) has loaded, it works, because the div is visible.
Does anyone know a workaround for that?
Solution 1 (Quick and Dirty):
Used AngularUI fpr the "ui-toggle" directive. It toggles ui-hide or ui-show as class into the element.
Afterwards used this CSS:
.ui-show {opacity:1;visibility: visible;}
.ui-hide {opacity:0;visibility: hidden;}
Worked for me in Chrome 24 and Firefox 18.
If someone got some other solutions, please post. My solution is maybe not the best one.