I'm trying to figure out how to add a title to a iframe that has no 'id' using javascript.
The code is like this:
<div class="review-right">
<div>
<iframe></iframe>
</div>
</div>
And I want to get this:
<div class="review-right">
<div>
<iframe title="Sample"></iframe>
</div>
</div>
This is what I've tried:
<script type="text/javascript">
$(document).ready(function(){
$(".review-right iframe").attr('title', 'Sample');
});
</script>
I'm a noob at jquery so I don't know if this is even right.
Try removing the . from .review-right class in the HTML and in the Script just use basic DOM
document.querySelector(".review-right div iframe").title = 'Sample Vanilla'
<div class="review-right">
<div>
<iframe></iframe>
</div>
</div>
JQuery Solution
$(document).ready(function(){
$('.review-right iframe').prop('title', 'Sample Jquery');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="review-right">
<div>
<iframe></iframe>
</div>
</div>
Related
I've build myself a sign input on my website inside a modal popup. The problem is that I can have an unknown amount of modals generated in a foreach within PHP. Because of this my JavaScript code don't works anymore. Do you have any idea how I can improve my function to make it workable for a undefined amount of signature modals?
var signaturePad;
jQuery(document).ready(function () {
jQuery(document).on('opened', '#sign-modal', function () {
var signaturePadCanvas = document.querySelector('.signature-pad-canvas');
var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
signaturePadCanvas.setAttribute("width", parentWidth);
signaturePad = new SignaturePad(signaturePadCanvas);
jQuery('#clear-signature').click(function () {
if (signaturePad) {
signaturePad.clear();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#3.0.0-beta.3/dist/signature_pad.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/remodal#1.1.1/dist/remodal.min.js"></script>
<div id="sign-modal" class="remodal remodal remodal-is-initialized remodal-is-opened" data-remodal-id="sign-nda-modal-1234567889">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Hello</h1>
<p>I am a random text</p>
<div class="signature-pad-canvas-container">
<div class="signature-pad-canvas-wrapper">
<canvas class="signature-pad-canvas"></canvas>
</div>
<div class="clear-signature-wrapper">
<span id="clear-signature">Delete</span>
</div>
</div>
<br>
<div class="remodal-buttons">
<button data-remodal-action="cancel">Cancel</button>
<button onclick="sign('123abc', '456cdf')">Sign</button>
</div>
</div>
<div id="sign-modal" class="remodal remodal remodal-is-initialized remodal-is-opened" data-remodal-id="sign-nda-modal-9876543">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Hello</h1>
<p>I am a random text</p>
<div class="signature-pad-canvas-container">
<div class="signature-pad-canvas-wrapper">
<canvas class="signature-pad-canvas"></canvas>
</div>
<div class="clear-signature-wrapper">
<span id="clear-signature">Delete</span>
</div>
</div>
<br>
<div class="remodal-buttons">
<button data-remodal-action="cancel">Cancel</button>
<button onclick="sign('764647gc', 'iuhiz78')">Sign</button>
</div>
</div>
......
The reason why your modals have stopped working is because each modal you create is created with the same id.
This means that when you access the element with DOM, only the first element would be returned. Using a class is not the best idea as you lose the ability to target specific elements without looping.
The best solution in my opinion is to dynamically generate the id as you create your modals. This means you could have something like sign-modal-1, sign-modal-2 etc for each modal you create.
Then, in JQuery, you target elements with ID's that get opened, that begin with sign-modal, i.e. using the JQuery attribute selector.
JQuery Attribute Selector:
https://api.jquery.com/attribute-starts-with-selector/
I'm trying to achieve a toggle effect on a website.
The html looks like this:
<div class="prod-toggle-click">
<h2>Test</h2>
<div class="prod-toggle">
<p>test</p>
</div>
</div>
<div class="prod-toggle-click">
<h2>Test 2</h2>
<div class="prod-toggle">
<p>test 2</p>
</div>
</div>
And the JS:
<script>
$(".prod-toggle-click").click(function(){
$(this).parent().find('.prod-toggle').toggle();
});
</script>
This toggles the .prod-toggle of both divs. But I only need the .prod-toggle of the parent to toggle.
I've tried it like this:
<script>
$(".prod-toggle-click").click(function(){
$(this).next('.prod-toggle').slideToggle();
});
</script>
but that's not working either. Any suggestions?
You just need to use find('.prod-toggle') and remove the parent() or next() which you are using. This is because the div with class prod-toggle is inside the div with class prod-toggle-click so find() will simply work for you here.
$(".prod-toggle-click").click(function(){
$(this).find('.prod-toggle').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prod-toggle-click">
<h2>Test</h2>
<div class="prod-toggle">
<p>test</p>
</div>
</div>
<div class="prod-toggle-click">
<h2>Test 2</h2>
<div class="prod-toggle">
<p>test 2</p>
</div>
</div>
You need put this under $(document).ready and also remove parent()
$(document).ready(function () {
$(".prod-toggle-click").click(function(){
$(this).find('.prod-toggle').toggle();
});
});
For this specific case, I would use children() instead of find(). It only looks at the immediate children of the node. It is more explicit and that's the reason of my preference. I guess performance is not an issue but children() should also be faster.
$(".prod-toggle-click").click(function(){
$(this).children(".prod-toggle").toggle();
});
Lets say I have this...
<div class="container" id="continingStuff">
<div class="someClass" id="notLookingForThis" data="dataValue1">
Stuff
</div>
<div class="someClass" id="lookingForThis" data="dataValue2">
Stuff
</div>
</div>
and I want to get the id of the div thats data value is dataValue2, how can I do that with jQuery or Javascript?
You can use Attribute Equals Selector to get element, then you can use attr() method to get id of the element.
Example:
$(document).ready(function() {
var id = $('div[data=“dataValue2”]').attr('id');
console.log(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=“container” id=“continingStuff”>
<div class=“someClass” id=“notLookingForThis” data=“dataValue1”>
Stuff
</div>
<div class=“someClass” id=“lookingForThis” data=“dataValue2”>
Stuff
</div>
</div>
Using jQuery, you can use this selector:
var id = $("div[data='dataValue2']").attr('id');
Here's working a code snippet:
var id = $("div[data='dataValue2']").attr('id');
console.log(id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="continingStuff">
<div class="someClass" id="notLookingForThis" data="dataValue1">
Stuff
</div>
<div class="someClass" id="lookingForThis" data="dataValue2">
Stuff
</div>
</div>
you can use this for your code
var id = $('*[data="dataValue2"]').attr('id');
i have 2 divisoin
<div id="details">
<div id="feature">
</div>
</div>
I need to put the content using $("#details").html(content); (it is working correctly) like that way i need to put the content inside feature div i am using following way:
$("#details #feature").html(content);
but it is not working..how to solve?
When you use $("#details").html(content); you override the content of the div. So you're inner div with the id feature gets removed. Maybe you use $("#details").prepend(content); or you add another div for the main content and replace that content.
Look here is an example:
https://jsfiddle.net/morrisjdev/s9u7rfcu/
ID is a unique attribute so you can directly use id like below.
$(function() {
var content = "Some text here";
$('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
OR
$(function() {
var content = "Some text here";
$('#details').find('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
$(document).ready(function(){
var htmldetail ="Hello! I am Here";
var details = $("#details").html(htmldetail);
$("#userfeature").html(details);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="details">
<div id="userfeature">
</div>
</div>
The second is #feature and not #userfeature. And also add the jQuery Library as well. You can replace test with content variable.
$("#feature").html("test");
<div id="details">
<div id="feature">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
And also remember Id is unique and hence no need to mention its parent.
Run the following snippet and you can get the output.
Simple way..Go Through this
HTML
<div id="details">
<div id="feature">
</div>
</div>
JQUERY
$(document).ready(function()
{
var content="contain sample data";
// $("#details").html(content); if you wrote like this,
this will replace all content, so the inner div will be replaced
$("#details").append(content); // outer div
$("#feature").html(content);
});
Or you can use css-like selector method:
$(document).ready(function() {
$('#details > #feature').html('Hello <strong>World!!!</strong>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
I have created a plunk for it and it is working.
Try including the action inside
$( document ).ready(function() {
console.log( "ready!" );
var content = 'Hey there';
$("#details #feature").html(content);
});
Plunk :- http://plnkr.co/edit/63GsIoGmprnKs7oe77cF?p=preview
hello all i`m good php developer not learn js yet..... my problem is
i have div
<div id="test1">
</div>
add div
i want when click in add div link, dublicte div and change number in id to be test2 , test3, unlimited
like the example
<div id="test1">
</div>
<div id="test2">
</div>
<div id="test3">
</div>
If you use jQuery this can easily be accomplished with the following:
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#div-creator').click(function(){
var numberOfDivs = $('.testClass').length;
$('<div id="test' + numberOfDivs + '" class="testClass">hi</div>').appendTo('body');
});
});
</script>
</head>
<body>
<div id="test1" class="testClass"></div>
Add Div
</body>
</html>
Demo can be found here: http://jsfiddle.net/4eDkJ/1/
Get the original div with document.getElementById()
Then create a new div with document.createElement('div')
Then loop on all the attributes for the first div, setting each one on the second div. Put in a case for element.getAttribute('id') and increment the number before you set it
When your new div is done, do originaldiv.parentNode.appendChild(newdiv)