$('div.box').html("hello")
puts the word hello inside all my div's of class 'box'. They all have an assigned id.
I'm trying to figure out how to put each div's id instead of 'hello' inside the div. Maybe this is really easy, but I can't figure it out. I'm also new to jQuery. Any ideas? I've tried:
$("div.box").html("id: " + $(this).attr("id"));
Try this:
$("div.box").each(function() {
$(this).html("Id: " + this.id);
});
Full example:
<html>
<head>
<title>Layout</title>
</head>
<body>
<div id="id1" class="box">Box One</div>
<div id="id2" class="box">Box Two</div>
<div id="id3">Box Three</div>
<div id="id4" class="box">Box Four</div>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function() {
$(function() {
$("div.box").each(function() {
$(this).html("ID: " + this.id);
});
});
});
</script>
</body>
</html>
You'll want to loop through each item.
$("div.box").each(function()
{
$(this).html("id: " + this.id);
});
Related
Replace from <span class="redbadge"> the text No with Yes if div contains the text I am now visible.
HTML
<div class="visibleonsearch">
<span class="redbadge">No</span>
I am now visible.
</div>
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
$(".visibleonsearch").text(function () {
return $(this).text().replace("No", "Yes");
});
</script>
I am not familiar with jQuery to add the condition if.
You can try using :contains selector like the following way:
jQuery(document).ready(function () {
if($(".visibleonsearch:contains(I am now visible)").length){
var span = $('.visibleonsearch').find('.redbadge');
span.text(span.text().replace("No", "Yes"));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="visibleonsearch">
<span class="redbadge">No</span>
I am now visible.
</div>
If the goal is to change the text of the span while leaving the span itself in the DOM then you can use :contains to find the relevant .redbadge element, like this:
$('.visibleonsearch:contains("I am now visible") .redbadge').text('Yes');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="visibleonsearch">
<span class="redbadge">No</span> I am now visible.
</div>
try this code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".visibleonsearch:contains(I am now visible.)").find(".redbadge").text(function () {
return $(this).text().replace("No", "Yes");
});
});
</script>
</head>
<body>
<div class="visibleonsearch">
<span class="redbadge">No</span>
I am now visible.
</div>
</body>
</html>
So I've got a show/hide script I use on my website that works great. However there's 1 issue and one request.
Need to allow only 1 div at a time to show
When the div appears, to
have it 'slide' in from underneath the header.
Here's the script:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
Here is how the buttons work in relation to the div's in the HTML:
<a onclick="toggle_visibility('testing');">Testing</a>
<div style="display:none;" id="testing">
testing for page 2
</div>
Here is the layout of the screen in regards for the slide animation:
If anyone could help with adding these functions to the script or they have a different script that does the same thing but better please let me know.
Thanks
If you want to go with jQuery, then take a look at slideToggle():
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var activeDiv = 'welcome';
function toggle_visibility(id) {
if ( activeDiv === id ) return;
$('#' + activeDiv).css('display','none');
activeDiv = id;
$('#' + id).slideToggle();
$('#' + id).css('display','block');
};
$(document).ready(function() {
$('#welcome').slideToggle();
});
</script>
</head>
<body>
<a onclick="toggle_visibility('testing');">Show the First DIV</a><br>
<a onclick="toggle_visibility('testing2');">Show the Second DIV</a>
<div style="display: none;" id="testing">
The First DIV
</div>
<div style="display: none;" id="welcome">
Welcome!
</div>
<div style="display: none;" id="testing2">
The Second DIV
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle slideUp() and slideDown()</button>
</body>
</html>
I can't get the Resize aspect of jQuery UI to work, everything else works just fine.
I've look at several solutions listed on this site, and I've tried them all. It seems like the re-sizeable classes, and all the required elements are being added. I never see a handle or have the actual ability to resize.
Please take a look and let me know what I'm missing... if anything.
<link rel="stylesheet" href="canvas.css">
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script>
$(document).ready(function() {
var activeFrame = "#frame1";
$(function() {
$( "#assets" ).accordion();
});
$(".preview").click(function(event) {
console.log("Frame backdrop set to " + event.target.id);
$(activeFrame).removeClass();
$(activeFrame).addClass(event.target.id);
});
$(".prop").click(function(event) {
console.log("User added " + event.target.id + "_full");
$(activeFrame).append('<div id="' + event.target.id + '_full" class="drag "></div>');
propPrep();
});
function propPrep(event) {
$( ".drag" ).draggable({ containment: "parent" });
$( "#" + event.target.id + "_full").resizable({ aspectRatio: 16 / 9});
}
});
</script>
</head>
<body>
<div id="assets">
<h3>Backdrops</h3>
<div id="backdrops">
<div id="bd1" class="preview"></div>
<div id="bd2" class="preview"></div>
<div id="bd3" class="preview"></div>
</div>
<h3>Props</h3>
<div id="props">
<div id="garfield1" class="prop"></div>
</div>
<h3>Characters</h3>
<div id="characters">test</div>
</div>
<div id="strip">
<div id="frame1"></div>
<div id="frame2"></div>
<div id="frame3"></div>
</div>
</body>
Pass the argument event to the prop function
Change
$(".prop").click(function(event) {
..
propPrep();
});
to
$(".prop").click(function(event) {
....
propPrep(event);
});
How to apply the .toggle() only the clicked DIV.
My current code applies to all toggle div.
The code switch between the content from <div class="toggled">
I need to do it in version 1.4
Anyone can help me?
This my code:
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle').click("click", function() {
$('.toggled').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
<div class="toggled">
<h3>FRONT 1</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 1</h3>
</div>
Switch Text Toggle<br/>
</div>
<div class="card">
<div class="toggled">
<h3>FRONT 2</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 2</h3>
</div>
Switch Text Toggle<br/>
</div>
</body>
</html>
Thanks in advance!
You'll need to change the ID of the anchors to a class, as ID's are unique.
Then you'd do:
$(function() {
$('.toggle').on("click", function() {
$(this).siblings('.toggled').toggle();
return false;
});
});
Where you find the siblings of the clicked anchor with the class .toggled, and toggle those. You also need a document.ready function, and the event handler has some typos.
And use a newer version of jQuery, 1.4 is outdated.
FIDDLE
Replace $('.toggled').toggle(); with $(this).toggle();. You're currently requesting all .toggle containers be toggled, not the one that is the focus of the event.
Try this:
$('.card #toggle').click(function() {
$('.toggled').toggle();
return false;
});
I'm new to JQuery and I would want like to know how to apply the .toggle() method only in clicked DIV instead of the all DIVs of the page.
Can anyone help me?
PS: I need implement in the JQuery version 1.4
This is my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle2').live("click", function() {
$('.toggle2').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 1</p>
<p class="toggle2" style="display:none;">BACK 1</p>
</div>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 2</p>
<p class="toggle2" style="display:none;">BACK 2</p>
</div>
</body>
Thanks in advance!
$(function() {
$('#toggle2').live("click", function() {
$(this).parent().find('.toggle2').toggle();
return false;
});
});
ID's are unique, and this will probably only work on the first occurence of #toggle, so you'll need to use classes there as well.
FIDDLE