I am trying to do two things:
Append a div to the body
Make all clicks to links class editlink make a popup and not go to their href
Doing just #2 is fine:
$(document).ready(function(){
// $(body).append("<div>Hello world</div>");
$("a.editlink").click(function(event){
alert("Javascript-endabled users should see this");
event.preventDefault();
});
});
But if I uncomment the code for #1 like below,
$(document).ready(function(){
$(body).append("<div>Hello world</div>");
$("a.editlink").click(function(event){
alert("Javascript-endabled users should see this");
event.preventDefault();
});
});
the div appears as expected, but clicking editlink links no longer gives me a popup and navigates to the link's href.
What's going on?
Did you mean:
$("body")
rather than:
$(body)
?
Can I recommend that you use Firebug to get decent error reporting? You'd have found this very quickly with Firebug.
You are missing the quotes for your body tag selector:
$('body').append("<div>Hello world</div>");
Related
I have a website on which I have the following script intended to handle all links:
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function(event){event.preventDefault();
linkLocation=this.href;
if(!linkLocation.contains("#")){$("body").fadeOut(1000,redirectPage);
}});
function redirectPage(){
window.location=linkLocation;}})
What it should do is, when a link is clicked to fade out and then to fade back in.
The issue I am facing is that in IE, links simply do not work.
Is it possible to edit my code in order for it to work?
If not, is there a way I can use a fallback code during this issue?
This issue is not present in chrome and I am using the latest IE
You should first check if your url contains the substring that you want to check with using indexOf() method. If it contains that character/substring then it'll return any 0 or positive value. Else it'll return -1 .
Try this way :
HTML :
ToogleFade
jQuery :
$(document).ready(function(){
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a").on("click", function(e){
linkLocation = $(this).attr("href");
e.preventDefault();
if(linkLocation.indexOf('#') == -1){
$("body").fadeOut(3000, redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
jsFiddle
Resources :
indexOf()
I found that the answer was to set the z-index. I have a stack of absolutely positioned divs and wanted to fade between them. The only way I could get IE8 to handle the fades nicely was to set the z-index of the element to be faded in higher than the element to be faded out.
$('#fadeoutdiv').css({zIndex:99}).fadeOut(2000);
$('#fadeindiv').css({zIndex:90}).fadeOut(2000);
and for redirect Check the Link Stackoverflow
I have gone through your code its almost correct you simply need to change something in your click function because preventDefault(); creating problem with the default functionality of <a></a> tag...
Also click on Allow block content when it ask you in IE.
Instead try this :-
<script>
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function() {
linkLocation=this.href;
if(!linkLocation.contains("#"))
{
$("body").fadeOut(1000,redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
</script>
I hope this will work for you..
I am trying to do something very simple. If you go to http://cutecuttingboards.com/product/apple/, I simply want to hide the "From:" price after the user choose a size in the drop down menu. I am trying the code below, which is working fine in Fiddle but not on the live site:
jQuery('#size').on('change', function(){
jQuery('p.price').hide();
});
Here is the fiddle with unformatted code: http://jsfiddle.net/anneber/U2Mat/
Any help is much appreciated!
Anne
i know it's kind of late but.. in case someone else is having the same problem, this should do the trick:
jQuery(document).ready(function($) {
$(document).on("change", ".variations #size", function() {
$('p.price').hide();
});
});
If I copy/paste your code above into web inspector and then change the selection it works, so most likely, the code is either not in the page, not being run, or being run before the related elements have been loaded into the DOM.
There is an error in your cutecutb.js file the Unterminated comment. i.e you are not terminating the comment
There is no "*/" sign.
EDIT :
Now another reason in add-to-cart-variation.min.js there is already an onchange event of dropdown
You can see you "#size" element is inside ".variations" class
UPDATE WORKING NOW
Got it working now. Script snippet was wrong and was not even called somehow.
For future reference -> to close bootstrap tabs:
</script>
$("#closetab").click(function() {
$("#myTabContent").hide();
});
</script>
Close
And be careful when using center-TAGs for anchor texts. It screws with your js/jquery when pointing to IDs of content within the center TAG.
Im using Bootstrap Tabs ( http://twitter.github.com/bootstrap/javascript.html#tabs ) with a slightly changed bootstrap-tab.js to show tabs on hover:
$(function () {
$('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
Now i want to add a way to manually close those tabs. I found a code snippet somewhere that does the trick in Chrome/Mozilla/Opera but not in IE:
<script>
$('a[href="#closetab"]').on('click',function(){
$("#flyout_tab").hide();
});
</script>
and
Close
In IE when i click the close-button it sends me to the root of the directoy the site is in.
I guess it has something to do with the way IE handles empty a href's (a href=""). When i put something like a href="#" it wont work in any browser.
Try putting "closetab" in the href property like this:
Close
Since the above code doesn't work, try changing the script to:
<script>
$('#closetab').on('click',function(){
$("#flyout_tab").hide();
});
</script>
First of all, thats my current state of play: thsbrk.de.
The black boxes should be e.g. a about section. I want to achieve that if you enter my page (thsbrk.de) you directly go to my reference section (anchor '#references'). Then, if you hit the about link you will scroll up to that about section. I already tried to make it working but it doesn't. The anchor seems to be not working.
It would be awesome if someone could look at my code and offer me a solution :)
(The scroll isn't implemented yet, I only ask for the anchor problem)
EDIT: Here I've got a example how it should work: Example
Give a script tag like this in the head.Let it be the first script also.
<script>
location.href="http://thsbrk.de/#references"
</script>
From your code, you have did the same. But just try reordering the script tags it might work.
Plain JS:
window.onload=function() {
var anchorHash = 'references';
document.getElementsByName(anchorHash)[0].scrollIntoView();
}
Here is a jQuery example from 2009 - there may be newer ways
How do I scroll a row of a table into view (element.scrollintoView) using jQuery?
In your case this might work
$(document).ready(function() {
var anchorHash = 'references';
var pos = $('#'+anchorHash).position();
window.scrollTo(0,pos.top);
});
Try this and tell me the result:
$(document).ready(function() {
window.location.href = '#references';
});
and then modify your anchor tag like this:
<a name="references">Here</a>
$(document).ready(function(){
$("a[href*='http://']:not([href*='"+location.hostname+"'])").attr("target","_blank");
$("a[target!='_blank'][target!='_top']").live('click', function(){
$("#actualcontent").html('<center><img src="/deltasite/uploads/smallloader.gif"></center>');
var url=$(this).attr("href")+'?jquery=1';
$("#actualcontent").load(url);
$("#nav").load('/delta/pack_files/other/nav.php?url=' +$(this).attr("href"));
window.location.hash=$(this).attr("href");
return false;
});
});
For some reason, on one embedded page of the site, this seems to affect links and images with onclick attribute. Any idea why? (Even if their target is blank or top). It only seems to do it on one page, annoyingly.
Any ideas?
Thanks,
Tom.
Try excluding images/links which have an onclick attribute, using a combination of the :not selector and the has attribute selector:
$("a[href*='http://']:not([href='foo']):not([onclick])").attr("target","_blank");
Demo: http://jsfiddle.net/HjYEX/2/