i have little problems with JavaScript onClick function.
I need function that will get class, for example .modal. It's look like this right now
<div class="modal" onclick="modalFix()">
<p>here is some text</p>
</div>
And there is script that works, but i must delete onclick="modalFix()"
<script type="text/javascript">
function modalFix(){
$("body").addClass("modal-open");
};
</script>
How to rewrite that same JavaScript function so i can call div class from it?
You can use following script.
JavaScript:
$(document).ready(function() {
$('.model').click(function() {
$("body").addClass("modal-open");
});
});
Related
Trying to change the class of an item with jQuery, but I can't seem to make it work. For some reason, nothing at all is happening.
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$("#theSpinner").click(function() {
$("#theSpinner").toggleClass("spinning");
});
</script>
<a href="#" id="reload">
<img src="spinbut.png" style="width:100px;height:100px;" id="theSpinner" class="notspinning">
</a>
I've tried with:
$("#theSpinner").click(function() {
$("#theSpinner").removeClass("notspinning");
$("#theSpinner").addClass("spinning");
});
aswell as $("#reload") instead of $("#theSpinner"), and with an onClick="" to a javascript function containing the addClass / removeClass part.
I really don't know what's the problem, but any way around this bull would make me very happy.
Try wrapping your jQuery code within a "document-ready" block to ensure that jQuery has been loaded prior to calling your function :
<script>
// Example of a document ready function
$(function(){
// When jQuery has loaded, wire up this function
$("#theSpinner").click(function() {
$(this).toggleClass("spinning");
});
});
</script>
Example
You can see a working example of this in action here and demonstrated below :
Here you go
<img src="spinbut.png" style="width:100px;height:100px;" id="theSpinner" class="notspinning">
<script type="text/javascript">
$("#theSpinner").click(function() {
$(this).toggleClass("notspinning spinning");
});
</script>
How to add text from span tag to data-attr?
Example:
I have this code
<div class="clearfix colelem" id="u92-5"><!-- content -->
<p>Icon<span id="u92-2">iconsymbol</span></p>
</div>
And I want to add iconsymbol to data-attr="iconsymbol" of the same element like a:
<div class="clearfix colelem" id="u92-5" data-attr="iconsymbol"><!-- content -->
<p>Icon<span id="u92-2">iconsymbol</span></p>
</div>
Yes and it will be with all elements which has a title="icon"
<script>
$( document ).ready(function() {
$("[title*='icon']").attr('data-attr',function(){
// I don't know
}).removeAttr('title');
});
</script>
Do you know how to do it?
So I know it is very simple but I am new in jquery and I need in your help.
I hope you understood my question.
Here is an example that should work for you. There is probably a few ways you can pull this off, but this should hopefully get you started. Please see the attached JSFiddle to see this example in action
$(function() {
$('[title*="icon"] span').each(function(){
$(this).parent().closest('div').attr('data-attr', $(this).text())
});
});
Here is another way you can do this as well
$('[title*="icon"]').each(function(){
$(this).attr('data-attr', $(this).children().closest('span').text());
});
JSFiddle Example
Your <div>s should have attribute title="icon"
You are using a callback to attr() function, so return the value which you need to set inside the function using .text().
$(document).ready(function () {
$("[title='icon']").attr('data-attr', function () {
return $(this).find('span').text();
}).removeAttr('title');
});
Demo
Right now I'm using <body onload="function">, which changes some text on the page based on which element is focused on. It works fine, but I need my site to run the function every time the focus changes (or, even better, every time any part of the page is clicked).
Currently the code looks like this:
<body onload="changeText()">
<script>
function changeText(){
function here;
}
</script>
<p>This is where text changes based on the function</p>
Thanks!
You can attach onclick event on document. jsfiddle
document.onclick = function(){
// your code
//alert("clicked");
}
If you want change on focus then use
window.onfocus = function(){
// your code
//alert("focus");
}
window.onclick = function () {
//do some stuff
document.body.style.backgroundColor = "red";
}
<p>text text text</p>
<button>it does not matters if you press me or any where else</button>
Try this:
<!-- language: lang-html -->
<body onload="changeText()">
<script>
function changeText(){
function here;
}
document.onclick=function(){changeText();};
</script>
<p>This is where text changes based on the function</p>
jQuery doesn't suffer from the disable-clicking issue
$(document).click(function(e){
//Blah
})
I have some question about how to get some value from some element like div,etc using jquery and without write onclick event or etc on the div where I want to get that value.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="test" title="test1">test</div>
<div id="test2" title="test2">test2</div>
<script>
function getVal(attr,value){
$("#show").text("this "+attr+" have value ="+value);
}
$(document).ready(function(){
$("#test").click(function(){
getVal("#test",$("#test").attr("title"));
});
});
</script>
<div id="show"></div>
</body>
</html>
Usually to get some value from div that i click, I add an onclick event on div like
<div id='test' onclick="getVal(test)" ></div>
and it will return "test". And the code that I write above nearly what I want, but the problem that I have is if I have a many div, how can I get the value from each div that I click just using jquery click function and I don't need to write
$("#test").click(function(){
getVal("#test",$("#test").attr("title"));
});
$("#test2").click(function(){
getVal("#test2",$("#test2").attr("title"));
});//and so on
here the code that I use to achieve what I want, using onclick event that I put on div:
<script type="text/javascript">
function overlay(rel){
var value = rel;
$(document).ready(function(){
$(".img"+value).click(function(){
$(".overlay-bg"+value).fadeIn();
});
$(".close"+value).click(function(){
$(".overlay-bg"+value).fadeOut();
})
});
}
</script>
<div id="gallery">
<img src="http://localhost/wedding/source/gallery/thumb/thumb-a.jpg" class="img1" onclick="overlay(1)" title="photo1" alt="photo1"/>
</div>
<div id="overlay-bg" class="overlay-bg1">
<div id="overlay"><img src="http://localhost/wedding/source/gallery/a.jpg"/>
<span>photo1</span>
<span style="font-size:0.8em;"><p>photo a</p></span>
<div id="close" class="close1"></div>
</div>
</div>
<div id="gallery">
<img src="http://localhost/wedding/source/gallery/thumb/thumb-b.jpg" class="img2" onclick="overlay(2)" title="photo2" alt="photo2"/>
</div>
<div id="overlay-bg" class="overlay-bg2">
<div id="overlay"><img src="http://localhost/wedding/source/gallery/b.jpg"/>
<span>photo2</span>
<span style="font-size:0.8em;"><p>photo b</p></span>
<div id="close" class="close2"></div>
</div>
</div>
I'm really want to know how to resolve my problem.
Give the elements you want to attach the click event handler to the same class. Then use the class selector [docs] to select all of them:
$('.sharedClass').click(function() {
getVal(this.id, $(this).attr("title"));
});
jQuery will bind the event handler to each of the selected elements.
There are many ways to select elements [docs], selection by ID or class are just two of them. You might also find the jQuery tutorial useful to get a better idea of how jQuery works.
you can use the this keyword within the handler function, and it will point to the element that was clicked
Here's the correct way to do it.
Put a class name to your target div e.g.
<div id="test" class="clickable" title="test">test</div>
<div id="test2" class="clickable" title="test">test</div>
...
...
Then create a jQuery event with selected class
$('.clickable').click(function(){ ... });
<div id="test">harsh</div>
<script>
alert(document.getElementById('test').innerHTML);
</script>
If you want to call this function with the click of every div, use :
$("div").click(function(){
getVal($(this),$(this).attr("title"));
});
If you want to call the function for a set of divs, but not all, give those divs a class name as suggested by #Felix Kling.
Check out the jQuery Selectors to get a better idea.
Not sure what you're trying to achieve.
If you have multiple values how do you want to store them?
If you have an array that you wanted to populate you can use the each() function on a JQuery selector to traverse all elements selected.
Like so:
var values = new Array();
$(document).ready(function(){
$('#test1, #test2').each(function(){
values.push($(this).html());
});
});
You could also store the values in an associative way to make retrieval a bit easier if you didn't want to iterate through an array. For example you could use the value of the 'title' attribute as the key in the array.
Replace the values.push() line with this line of code:
values[$(this).attr('title')] = $(this).html();
I am an absolute beginner in this field. I have written the following code but it's not working. Can someone explain where is the error?
<script type="text/javascript">
$("button").click(function(){
$("div").show("slow");
});
</script>
<button>show</button>
<div style="min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
You execute the jQuery before the button is there. So at the point jQuery is executed, the button is not existent.
The solution is to use $(document).ready(...).
All elements on a page (HTML) are parsed to the DOM of that page. The DOM is a hierarchical collection of all elements. You can select elements out of it using jQuery.
However, obviously the DOM needs to be fully there before you can select the elements. In your case, you first select the button, and create it afterwards. That does not work. At the time of the selector the button does not exist yet.
Using jQuery's $(document).ready(), you can defer the function containing selectors until the DOM is fully loaded and parsed - at which time the selector works because the elements are there.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
});
</script>
<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
You may be trying to listen for the click event before the button exists. Try waiting for the page contents to load:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
});
</script>
<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
As you can see from the fiddle here http://jsfiddle.net/bQUFE/ your code works (the div is shown when you click)
If you don't have this result always check:
1)that you loaded jquery before your script
2)Always use $(document).ready() like this:
$(document).ready(function(){
$("button").click(function(){
$("div").show("slow");
});
});
the javascript is executed before the document has loaded, so the click-handler can't be attached to the button. to avoid this, wrap your code into a domready-function like this:
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
}
It probably is working but as your <div></div> is empty you might notice it.
Also make sure you only run your JQuery script AFTER the div has been added to your HTML.
May I also suggest to use better identifiers, because you might eventually have many div's and buttons on your page.
Example:
<button id="btn1">Click me</button>
<div id="hidden_div" style="display: none">
Hello there!
</div>
<script type="text/javascript">
$('button#btn1').click(function() {
$('div#hidden_div').show('slow');
});
</script>
You code runs before the button is created so it cannot bind the event.
So you need to put your code in the document.ready event. In jQuery this is handled by $(document).ready(handler) or $(handler).
Documentation at http://api.jquery.com/ready/
Fix to your code to make it work
$(function(){
$("button").click(function(){
$("div").show("slow");
});
});
demo at http://jsfiddle.net/gaby/vkrzt/
you need to give your elements "id"
so:
<button id="mybutton"></button>
and
<div id="mydiv"></div>
Then you'll use $("#mybutton") or $("#mydiv") to call these