When I click the link(Anasayfa), function doesn't work. There is no change. What am I doing wrong?
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
function anasayfa() {
$( '.gributon1' ) . css({ "background-color": "red" });
}
</script>
....
<div class="gributon1"></div>
....
Anasayfa
it works http://jsfiddle.net/BeYty/
You need to return false from your link's onclick or the page will refresh since you are clicking on a link to href "" which is the current page.
Anasayfa
Your Div is empty and you can't see it's changes, and the href value of your link must be set to "javascript:void" in order not to refresh the page.
somthing like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
function anasayfa() {
$( '.gributon1' ) . css({ "background-color": "red" });
}
</script>
...
<div class="gributon1">..</div>
....
Anasayfa
try by making the following two changes to your code
modify your href to
place some text inside the div
i hope you are placing your code inside the <head>//your script here</head>
<div class="gributon1">some text</div>
Anasayfa
and the script part remains the same
function anasayfa() {
$('.gributon1' ).css({"backgroundColor":"Red"});
}
http://jsfiddle.net/3nigma/BeYty/34/
Related
I want to prevent a link from taking the user to another page.
When I try to select elements with getElementById("id"), it works fine. When I try to select by using $("#id"), however, it doesn't work. To clarify, this works:
https://jsfiddle.net/1nwaptL9/
but this doesn't work: https://jsfiddle.net/7vkepm9e/1/
I realise both of these fiddles do actually work, but when I load the HTML files in Chrome, the one with the jQuery selection doesn't work. Since the source code I've included below works fine in JSFiddle, but not in Chrome, I suspect I've done something wrong, but JSFiddle doesn't process links or something like that. Any help would be appreciated!
Source code that doesn't work:
<html>
<body>
<a id="preventlink" href="http://youtube.com"> click here </a>
<script src="js/jquery-1.11.3.min.js"> </script>
</body>
</html>
<script>
var link=$("#preventlink");
link.addEventListener("click", function(e) {
e.preventDefault()}, false)
</script>
jQuery creates a jQuery instance, if you want the actual DOM element, you can do the following:
var link = $("#preventlink")[0];
Or, just keep using jQuery to add events:
$("#preventlink")
.click(function (e) {
e.preventDefault();
});
Getting the element from the jQuery instance:
var link = $("#preventlink")[0];
link.addEventListener("click", function(e) {
e.preventDefault()
}, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="preventlink" href="http://youtube.com"> click here </a>
Sticking with just jQuery:
$("#preventlink").click(function(e) {
e.preventDefault()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="preventlink" href="http://youtube.com"> click here </a>
See jQuery's doc on the subject
This is because addEventListener is a javascript function. It's not defined for jquery. For jquery you can use bind function. Below is the sample code
$(document).ready(function() {
var link=$("#preventlink");
link.bind('click', function(e){
e.preventDefault();})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<body>
<a id="preventlink" href="http://youtube.com"> click here </a>
</body>
</html>
You are mixing jQuery with vanilla JS:
$("#id") -- jQuery
document.getElementById("id") -- Vanilla JS
Try to use either one of them.
jQuery:
$("#preventlink").on("click", function(e) {
e.preventDefault()
})
Vanilla JS:
var link=document.getElementById("preventlink");
link.addEventListener("click", function(e) {
e.preventDefault()}, false)
Here is a more jQuery way of doing what you are looking for
var $link = $("#preventlink");
$link.on("click", function(e) {
e.preventDefault();
alert("link clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<a id="preventlink" href="http://youtube.com"> click here </a>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
</html>
Try this:
$("#preventlink").on('click', function (e)
{
e.preventDefault ();
});
I am trying to add 2 simple click functions to 2 images and make them "active" when clicked, however for some reason the code is not working.
This is the link to the external file:
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
<link type="text/css" rel="stylesheet" href="blogformat.css" />
<script type="text/javascript" src="likeandshare.js"></script>
</head>
This is the html:
<div class="blog-header">
<h1>This heading should be center aligned and colored</h1>
<p>Italised date and Author entered here</p>
<div id="facebook-like-button">
<img src="images/facebook_like_button_big.jpeg">
</div>
<div id="facebook-share-button">
<img src="images/facebook-share.png">
</div>
</div>
This is the js code:
$(document).ready(main);
var like = function() {
$("#facebook-like-button").click(function() {
$(this).toggleClass("active");
});
};
I'm not sure why the div is not becoming active when clicked but I would also like to attach the function ONLY to the image, rather than the entire div.
Help :D
thanks.
As far as I'm aware, your code should be working. You must be incorrectly calling the ready function.
working example http://jsfiddle.net/2j0s1j8v/3/
All of these events fire back:
share = document.getElementById("facebook-share-button");
share.onclick = function(){
console.log("ONCLICK");
}
share.addEventListener("click", function(){ console.log("CLICK LISTENER"); } );
$("#facebook-share-button").click(function() {
console.log("JQUERY CLICK");
});
Check the console and look at the messages. All of them fire properly. f12 on chrome.
You can simply do this :
$(document).ready(function(){
$("#facebook-like-button").find('img').click(function() {
$(this).toggleClass("active");
});
});
first include jquery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
</head>
second you create a like function and use main function .. you have a main function also or bad typo or what anyway in your case it should be
$(document).ready(like);
if you want to select an image inside the div just use > a >img
var like = function() {
$("#facebook-like-button > a > img").click(function() {
$(this).toggleClass("active");
});
};
https://jsfiddle.net/2j0s1j8v/4/
Like button
$("#facebook-like-button img").click(function () {
$(this).toggleClass("active");
});
Share button
$("#facebook-share-button img").click(function () {
$(this).toggleClass("active");
});
Here is a working example if I understand correctly what you wanted.
adds active class to the image on click.
EDIT: added share as well
EDIT: How can I extend/edit "appended content" ?
I mean, If I have a div named "website" at "include.html" (the file which I appended using jquerys load) , Can I add text / code to that DIV after appending it?
I have a simple HTML menu page which Im trying to load to every page in my website.
Sorry if its a noob question ;) kinda noob with Jquery/js/html.
Here's one of the files:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cstyles.css">
<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type='text/javascript' src='menu2.js'></script>
<script type='text/javascript' src='menu_load.js'></script>
</head>
<body>
<script>
loadContent();
$(document).on('mouseenter', "#menulist", function() {
mainmenu();
});
</script>
<div id="contact_us" style="background:blue;">Something</div>
</body>
</html>
Heres menu2.js:
function mainmenu() {
$(" #menulist li").hover(function () {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(300);
}, function () {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function () {
mainmenu();
});
heres menu_load.js:
function loadContent() {
$("body").load("include.html");
}
Problem is: After loading the menu successfully (the html file named INCLUDE.html), The content on the page "disappears"...
In this case, the word: something wont show up.
To be more clear, it will show up for a second and then will be replaced by the content on the "include.html" file.
Any suggestions?
thanks in advance!
This happens because the way $("#body").load() works. I would suggest changing that with
.prepend()
That's because you're loading the include.html file in the entire document. You should make a element with an id and load it there. For example
<div id="toload"></div>
Then your jquery function would be:
function loadContent() {
$("#toload").load("include.html");
}
I have a div and a simple jQuery code that calls the div on an 'onlclick' event and properly hides on 'onmouseout' event. The problem is when I put a text or a link inside this div and move a cursor over the text / link in this div - it triggers out() function effect and dissappears - even if the cursor is still inside the div. Why is that so ? Thanks for comments.
<script src="js/jquery.js"></script>
<style type="text/css">
#sample {
position:relative;
width:500px;
height:200px;
background-image:url(images/img.png);
background-repeat:repeat-x;
}
</style>
</head>
<body>
<a href="javascript:show();" >link</a>
<div id="sample" onmouseout="out()">THIS IS TEXT</div>
<script type="text/javascript">
$(document).ready(function() {
$("#sample").hide();
});
function show() {
$("#sample").fadeIn('slow');
}
function out() {
$("#sample").fadeOut('slow');
}
</script>
</body>
</html>
Use mouseenter and mouseleave.
In the document ready function add this
jQuery("#sample").mouseleave(out);
and remove the onmouseout code from the HTML markup.
remove JavaScript code from HTML
and try this.
$(function(){
$("#sample").hide();
$("a").click(function() {
$("#sample").fadeIn('slow');
return false;
});
$("#sample").mouseout(function() {
$("#sample").fadeOut('slow');
});
})();
Demo
Your <a> element is inside the #sample element, so running fadeOut on #sample will hide it, and everything inside it.
To keep the <a> you need to place it outside #sample in the html.
Oooh, no I get it, try this instead of the inline stuff:
$("#sample").hide();
$("a").mouseenter(function() {
$("#sample").fadeIn('slow');
});
$("#sample").mouseleave(function() {
$("#sample").fadeOut('slow');
});
Here's a Fiddle, not the way I would do it, but the closest I could get to your example: http://jsfiddle.net/GkSGz/
i need to load an background image in css after the HTML things(text box ,hyperlinks) have been loaded ...
Like this:
$(function() {
$('someElement').css('background', 'url("...")');
});
In plain JavaScript:
<script type="text/javascript">
function loadBackgroundImage() {
document.body.style.backgroundImage="url(background.jpg)";
}
</script>
HTML:
<body onload="loadBackgroundImage();">
In jQuery:
<script type="text/javascript">
$(document).ready(function() {
$("body").css("background-image","url(background.jpg)");
});
</script>