Having an issue where on IE, a # is being added to the end of the URL, after clicking on a toggle. (i.e. website.com/direc/main.html*#*
This is disabling all the toggle functions. Haven't been able to duplicate the issue on FireFox. I have an e.preventDefault(); in each function but I have not been able to resolve this issue by putting e.prevent in different locations.
Code Below:
$(document).ready(function(){
$("#1_EH").click(function(e){
$("#1_S").slideToggle("slow");
e.preventDefault();
});
});
$(document).ready(function(){
$("#2_EH").click(function(e){
$("#2_S").slideToggle("slow");
e.preventDefault();
});
});
<img src="pic.jpg" border="0" alt="" />
<div class="client_box" id="1_S">
<h2>text</h2>
<p>textDirections »</p>
</div>
IDs can't start with digits; the result is undefined and (presumably) broken in Internet Explorer. Fix your ID attributes (1_EH/1_S/etc) to start with a letter instead of a digit.
e.preventDefault() should be the first line following function(e):
$("#2_EH").click(function(e){
e.preventDefault();
...stuff to be done...
});
Example code fixed here: http://jsbin.com/welcome/54005/
Not removing, however, please note that from the poster of the correct answer, this answer is Factually incorrect and should be disregarded.
Try removing the hash tag from the href in your link(s).
Related
I want to manipulate the DOM using jQuery. In my website, a header is being imported by a widget. I cannot edit this code directly, but a specific anchor in the header should have target _blank. When doing this, nothing happens. I get no error in my console, and nothing changes in the DOM.
I've used this jQuery code:
jQuery(document).ready(function() {
jQuery('#iwgh2-navigation-menu-toggle-animation-wrapper a').attr('target', '_blank');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="iwgh2-navigation-menu-site" style="" href="http://binnenland.vlaanderen.be">Anchor Text</a>
What I have checked:
The code is being executed. When I deliberately write a syntax error, I get an error in my console.
I tried to change the code to use .remove() instead of adding the anchor, but nothing happened as well.
Try using this instead:
jQuery(document).ready(function() {
jQuery('.iwgh2-navigation-menu-site').attr('target', '_blank');
});
I can only assume that the parent element id does not match your selector operator.
The id you use in your JS-code is not present in your HTML.
Add it there and your code will work:
jQuery(document).ready(function() {
jQuery('#iwgh2-navigation-menu-toggle-animation-wrapper a').attr('target', '_blank');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="iwgh2-navigation-menu-toggle-animation-wrapper">
<a class="iwgh2-navigation-menu-site" style="" href="http://binnenland.vlaanderen.be">Anchor Text</a>
</div>
Alternatively you can also just use
jQuery('.iwgh2-navigation-menu-site').attr('target', '_blank');
to add the attribute to every link with the classname.
On my website I have empty image frames like this when the load resource fails because it doesn't exist:
This is an example image tag:
<img class="thumbnail" src="{{event.venue.icon}}" id="thumbnail">
How can I simply remove these empty frames?
Bind to the error event for the images and from within that method you can remove the containers for any images that fail to load. Here is an example, but post your code if you want something more specific:
$('.yourImageSelector').error(function() {
$(this).parent().remove();
});
Check out onerror event, when image is loaded hide it if loading fails:
<img src="someimage.jpg" onerror="this.style.display='none';" />
Bind error event on img tag like this,
$(document).ready(function(){
$('#myImg').on("error", function() {
$(this).remove(); // Execute with commenting this line and see the result
console.log(document.querySelector('img'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="myImg" src="compman.gif" alt="Computerman" width="107" height="98">
Comment $(this).remove(); and execute, you will get the "Computerman" as the text alternative specified by alt attribute also the img element in the console as result.
I have a reporting function answerCardInnerLinkReportingCall which gets invoked on click on <a> tag inside a specific div. I use event.preventDefault(); to override the default click behavior.
Currently I am redirecting the user to the target url in the reporting function after sending all the reporting parameters using window.open('http://stackoverflow.com/', '_blank'); method.
jQuery(document).on('click','#answerCard a', function(event) {
event.preventDefault();
answerCardInnerLinkReportingCall(this);
});
If I use onclick function in the tag I would have returned true and it would make href work without me redirecting the user manually but is it possible to do the same in click handler? I can't use onclick since I dont have control over the html data.
I wanted to check if there is a better way of implementing this?
Edit1: Adding sample HTML
<div class="answer" style="display: block;">
<div class="well">
<div id="answerCard" answercardid="check_phone_acard">
<h3 id="answerTitle">check your phone</h3>
<div><ol class="answerSteps"><li>Go to <a title="Link opens in a new window" href="https://test.com" target="_blank">Check phone</a>. If prompted, log in.</li></ol></div>
<label id="seeMoreAnswer">Displaying 1 of 1 steps. </label></div>
<!-- Utility Section -->
<div class="util">
<span class="pull-left"><a id="viewFull" href="/test.jsp?sid=52345">View full article ?</a></span>
<span class="pull-right">
</div>
</div>
</div>
</div>
I guess you dont need to use any 'event.preventDefault();' if you want to use links native functionality after the script executed.
try like this
jQuery(document).on('click','#answerCard a', function(event) {
//event.preventDefault();
alert('script running');
answerCardInnerLinkReportingCall(this);
});
also created JS Fiddle. check it out.
You can use javascript's:
window.location.href = 'http://url.here.com';
To tell the browser to navigate to a page. Hope it helps.
Other way can be of returning true or false from answerCardInnerLinkReportingCall and depending on that call or dont call event.PreventDefault();
Try something like this:
$('#answerCard a').click(function(event) {
var loc = $(this).attr('href');
event.preventDefault();
answerCardInnerLinkReportingCall(loc, this);
});
function answerCardInnerLinkReportingCall(loc, that){
// your code to do stuff here
window.open(loc, '_blank');
}
See this demo fiddle
I have tried to make working this jQuery script, but maybe there is something wrong. I wanted to make the script working by clicking on the arrow on the right side of the page. As you can see from the JavaScript code and jsfiddle test I have try to make slide down the hidden #top-bg.
The JavaScript code:
$(document).ready(function() {
$(".bottone").click(function() {
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
And this is the jsfiddle test: TEST
Where I'm doing wrong?
You are not using the right type of quotation marks.
There is a big difference between:
$(“.bottone”).click(function(){
And:
$(".bottone").click(function(){
You're using "smart quotes" as opposed to regular quotes. Also, there is no need for the a tag, you can remove it and apply the click function directly to triangolo
$("#triangolo").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
Updated jsFiddle
You use the wrong quotes and also you try to catch a click on an empty tag (so nothing in fact)... ;)
Here is a JsFiddle that works : http://jsfiddle.net/uazw6/11/
<div id="top-bg" class="bg"></div>
<div id="top" class="bg">
<div id="triangolo">test
</div>
</div>
Javascript :
$(document).ready(function(){
$(".bottone").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active");
});
});
I have fixed... I have updated your jsfiddle... test it...
your code is now like below...
$(document).ready(function(){
$("#triangolo").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
You can also fix this issue by changing below code
<div id="triangolo">
</div>
with
<a href="#" class="bottone"><div id="triangolo">
</div></a>
I want to display the href link in the <div id="display"></div> tag so when I press anything in the menu or in my list it'll just open in the div with display as its id.
I have this menu like this done
<div class="menu">
HOME
</div>
<div id="display"></div>
and my JavaScript is like this
$('#display').html($('.menu a').html());
I don't know much about javascript, but I think the javascript code is actually wrong, I would appreciate is someone would help me.
I want to display the href
You need to fetch href property for that you can use .prop()
$('#display').html($('.menu a').prop('href'));
Demo
In case you mean retrieve the page and place it in the div:
// bind click event to all anchors within .menu
$('.menu a').click(function(e){
// fetch the page using AJAX and place the results in #display
$('#display').load(this.href);
// prevent navigating away from the page (default action of anchor)
e.preventDefault();
});
(Or maybe it's just me, but the question seems very hard to understand. :shrug:)
$('.menu a').on('click',function(e){
e.preventDefault(); //this will keep your link from loading
var href = $(e.currentTarget()).attr('href');
$('#display').html(href);
});
We can use an iframe to display the link in the <a> tag.
Here's a fiddle
Here is my version...
HTML
<div class="menu">
<a id="xxx" href="http://stackoverflow.com" onkeydown="myFunc()">HOME</a>
</div>
<div id="display"></div>
JS
$(document).ready(function() {
var data = $("a#xxx").attr("href");
$('#display').html(data);
});