So, in the script of my website, I have functions:
$(window).on('scroll', function(){
// some code
});
$('.subnav_single_box').on('click', function(){
$('#h1').animate({ right : '300%'}, 1000);
// some more code -shall refer to this block of code later
});
The problem is that some_more_code, inside on(click) works, but the #h1-code works only sometimes.
If I do not scroll before clicking the .subnav_single_box, then everything works just as I want it to, but if I scroll before clicking, then "some more code" works, but not #h1-code.
How do I fix this?
Related
I'm using jQuery to show tooltips on every link on my page that has a 'details' attribute
$(function() {
$tooltip = $(document).tooltip({
show: false,
track: true,
items: "a[data-details]",
content: function() {
return $( this ).data('details');
}
});
});
This works very well. However, when the user clicks one of those links, the URL is opened in a new tab (using target="_blank"). The problem is that the tooltip is still open when the user gets back on the first tab.
Here's what I tried so far:
$('a[data-details]').on('click mousedown mouseup', function() { // this might be overkill
$(document).tooltip("close"); // Doesn't work at all
$('div[class^="ui-tooltip"]').remove(); // removes the tooltip onclick, but gets it back opened when returning on the tab
});
Is there a way to keep the tooltips closed when the new page is opened?
Thank you for your help.
Here's a fiddle illustrating the problem: https://jsfiddle.net/su4v757a/
Note: I'm using jQuery 1.12.4 with jQueryUI 1.12.1
This is probably a bug.
As far as I can tell this must be a bug.
And you could let them know over at https://bugs.jqueryui.com/report/10?P=tooltip
I notice that the .tooltip("close") doesn't work in the fiddle. However the tooltip listens to the "mouseleave"-event to close, and we can force that by $('a[data-details]').trigger("mouseleave");
If you try this out you will see that it do close, but pops up again:
$('a[data-details]').on('click mousedown mouseup', function() { // this might be overkill
$(this).trigger("mouseleave");
});
Hover and click the "me":
Coming back to the page notice that the tooltip has closed and come back again:
Workaround - possible solution
Since .hide()-ing an element triggers the "mouseleave"-event you could do something funky like hiding the link on click, and showing it just a moment later.
$('a[data-details]').click(function() {
var $this = $(this);
$this.hide();
setTimeout(function() {
$this.show()
}, 1);
});
Setting the timeout to 1 ms would not create any flickering of the link, making the hide/show unnoticeable for the user.
Works in Chrome. Try it here: https://jsfiddle.net/cyx6528e/1/
Good luck!
tooltip usually works on hover functionality, can you provide js fiddle for your problem
Ehy guys. I have a strange kind of problem. I've created a button to scroll the page to the bottom when the user clicks it, and it works only if I use scroll(0,0), while if I use scrollTo(0,0) (which should work in the same way I guess) doesn't work (the page doesn't scroll, nothing happens). Here is a part of code: this is the function which should scroll to the top after click using scrollTo but which doesn't do anything.
<button id="scrollaInAlto" onClick="scrollInAlto();"
style="background-color:Transparent;border:none;display:none;"></button>
<script>
function scrollInAlto() {
window.scrollTo(0,0); <-- this one doesn't work
//window.scroll(0,0); <-- this one works
}
</script>
The only other thing I have is a small script to show and hide the button which scrolls the page: here it is.
<script>
$(document).ready(function(){
$(window).scroll(function(){
var $temp = $("#scrollaInAlto").scrollTop();
if (document.body.scrollTop > 50) {
$("#scrollaInAlto").show();
} else {
$("#scrollaInAlto").hide();
}
});
});
</script>
Why doesn't scrollTo work properly?
I have been asked to put in place disabling of the right clicks on a website, I've informed them there is so many ways that people can still download the images via Google Images, Cache, Firebug etc etc, but none the less my arguments have gone ignored and they insist this must be done.
Any, I've put in the footer some code that disables right clicking on all elements using <IMG src=""> this fails to work on NivoSlider, I did change the script to use window load on disabling the right click which works but after slide1 it stops working and I assume this is something to do with changes to the DOM.
JavaScript is by far my weakest point and I'm hoping that someone without to much trouble can either give me a full working solution or something to go on. Thanks in Advance.
They are using NivoSlider with the following trigger:
<script type="text/javascript">
(function($) {
$(window).load(function() {
$('#slider').nivoSlider();
});
})(jQuery);
</script>
And this is the code that I've placed in the footer that fails to work on slide2+
<script>
$(window).load(function() {
$('img').bind('contextmenu', function(e) {
return false;
});
});
</script>
You're absolutely right with the DOM changes. You need to delegate the event to a parent element.
Try something like this:
$('#slider').delegate('img', 'contextmenu', function(e) {
return false;
});
Or this if using jQuery > 1.7:
$('#slider').on('contextmenu', 'img', function(e) {
return false;
});
You might be able to do it by preventing the default behaviour of a right click on the image.
See this answer: How to distinguish between left and right mouse click with jQuery
I'm new to Jquery and Ajax and have tried to solve a problem for over 1h now.
You can see the page here: http://smartcreations.se/test/test.html (If you click in the green area it have the effect I want it to have.)
Almost everything works as I want except i can't use the menu at the top to have the boxes to aminate and load the content as it does when you click on the green div.
So what I want from you guys is some input on how I can solve this, another point of view.
$(window).load(function(){
$(".box").click(function(){
$(this).animate({
top: '-50%'
}, 500, function() {
$(this).css('top', '150%');
$(this).appendTo('#container');
$(".loadinghere").load($(this).attr('name'));
});
$(this).next().animate({
top: '50%'
}, 500);
});
});
This is the closest I get, but the links not works at all.
You can just fake the click on the box by using e. g.
$("#box1").click();
but I would do it completely different:
About me!
Portraits
Weddings
Action
<script type='text/javascript'>
$(document).load(function(){
$("a.show").on("click", function(e){
e.preventDefault();
var click=$(this);
var link=click.attr("href")+"#box";
$("#box").after("<div id='box2' />").load(link, function(){
$(this).animate({
// your effect and stuff
});
// Rename the new box and throw out the old one
// Make sure, it is not visible
$("#box").remove();
$("#box2").attr("id","box");
});
});
});
</script>
The idea is, to use full html and extract just the html out of #box and insert it on your current page. You can also use the newer history api or anchors for this. The main advantage is, that you can still use your page if JS is turned of. (Miss)using name or other html attributes for this is a really bad practice. If you need to, use the data attribute.
(The code is untested and the quick and dirty way just to give you an idea.)
for a website, i am using the jQuery supzersized gallery script: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
As you can see in the demo, in the bottom right corner there is an little arrow button that toggles a thumbnail bar. There is no option in the config files to automatically blend this in when opening the site.
So i guess i have to simulate a click on that button (the button is the tray-button, see HTML). I tried something like this:
<script>
$(function() {
$('#tray-button').click();
});
</script>
However, this doesnt seem to work in any browsers i tested.
Any idea?
$('#tray-arrow').click(function() {
// prepare an action here, maybe say goodbye.
//
// if #tray-arrow is button or link <a href=...>
// you can allow or disallow going to the link:
// return true; // accept action
// return false; // disallow
});
$('#tray-arrow').trigger('click'); // this is a simulation of click
Try this
$("#tray-arrow").live("click", function () {
// do something
});
I assume that you want to popup the thumbnail bar #thump-tray on page load.
Here's a way to do it:
locate the file supersized.shutter.js and find this code:
// Thumbnail Tray Toggle
$(vars.tray_button).toggle(function(){
$(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
return false;
}, function() {
$(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
return false;
});
After it, add:
$(vars.tray_button).click();
Dont forget in your page (demo.html in the plugin), to change
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
to
<script type="text/javascript" src="theme/supersized.shutter.js"></script>
instead of using
$(function(){
//jquery magic magic
});
you culd try this witch will work your jquery magic after the full page is loaded (images etc)
$(window).load(function () {
// jquery magic
});
and to simulate a click you culd use // shuld be the same as $('#tray-arrow').click();
$('#tray-arrow').trigger('click',function(){ })
example:
$(window).load(function () {
$('#tray-arrow').trigger('click',function(){
alert('just been clicked!');
})
});
try
<script>
$(function() {
$('#tray-arrow').click();
});
</script>
Make sure that this code is after your carousel is initialized.
This looks like it's a problem of timing the trigger. The plugin also loads on document load, so maybe when you try to bind the event listener the element is not created yet.
Maybe you need to add the listener in something like the theme._init function
http://buildinternet.com/project/supersized/docs.html#theme-init
or somewhere similar.
A problem might be that your plugin detects whether the click has been initiated by a user (real mouse click), or through code (by using $('#id').click() method). If so, it's natural that you can't get any result from clicking the anchor element through code.
Check the source code of your plugin.