I want to move my html content from one div into another BUT WITHOUT rendering it again!
When I use the jquery html() method it will be rendered fully again!
E.g.
<div id="1">
<script>console.log("test")</script>
</div>
<div id="2">
</div>
<script>
$('#2').html($('#1').html())
</script>
will cause:
test
test
what I want is:
test
You can try using a combination of jQuery's .appendTo() and .clone() methods.
<div id="1">
<script>console.log("test")</script>
</div>
<div id="2">
</div>
<script>
$('#1').children().clone().appendTo('#2');
</script>
Here's a JSFiddle to demonstrate. Take a look at the console, and you should see that "test" is only logged once. If you want to move the elements from #1 to #2 rather than copy them, you can just remove .clone() from the chain.
Hope this helps! Let me know if you have any questions.
<script>
$('#2').hide().html($('#1').html())
</script>
Related
I made a text editor summernote for an article, and after that I read it with modalbootstrap and angularJS ng-repeat in html element to get data from json api my php, its works.
but the problem with the article content is that there is an image and I want to add the 'img-fluid' class so that the image is responsive.
I have tried adding classes with the jquery addClass method to element html, and it works with code like this.
point assume example:
my script.js
$('img').addClass('img-fluid');
result element img without ng-repeat works.
<div class='container'>
<div class='onlyDiv'>
<p>
<img src='bla.jpg' class='img-fluid' <--works>
</p>
</div>
</div>
but if the img element with the ng-repeat directive doesn't work
results addClass() doesn't work.
<div class='container'>
<div class='divWithNgRepeat' ng-repeat='artcl.content | unsafe'>
<p>
<img src='bla.jpg' <--no class added>
</p>
</div>
</div>
please help me master, thanks
First, try change the "ng-repeate" to "ng-repeat". If that's not the problem, then the jQuery line may be running before than ng-repeat loop. In this case you need to use something like:
angular.element(document).ready(function () {
$('img').addClass('img-fluid');
});
yess bro , I have successfully solved the problem. as # symphonic's says jquery is more executed before the ng-repeat directive finishes loading the data. I tried the code below and it worked
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal("show");
});
$("#myModal").on('shown.bs.modal', function(){
$('img').addClass('img-fluid');
});
});
I've got some pretty simple HTML, a photo and some text but I want to put a javascript element between them. This element is a countdown timer and can be inserted using external javascript.
I have a codepen with the HTML, inline css, and javascript here: https://codepen.io/thomaskwelker/pen/xjwQPj
<div class="kanye-wrapper">
<div class="kanye-photo">
<img src="https://vignette.wikia.nocookie.net/star-clan/images/9/90/Kanye.png">
</div>
<div class="kanye-timer">
<script src="js/kanye.js"></script>
</div>
<div class="kanye-link">
See why
</div>
</div>
I've done hours of Googling and trying things. Could some please tell me how I can get the javascript timer inside the "kanye-timer" div?
Instead of $(document.body).append($r.cvs);, try $('.kanye-timer').append($r.cvs);
This tells the JS to append the timer to the div, rather that just placing it at the end of the document
Your initialization code creates a canvas object that is never attached to any DOM document. The JavaScript snippet doesn't have to be included in line. But you can have a container where you want the canvas to be:
<div class="kanye-wrapper">
<div class="kanye-photo">
<img src="https://vignette.wikia.nocookie.net/star-clan/images/9/90/Kanye.png">
</div>
<div class="kanye-timer" id="timercontainer">
</div>
<div class="kanye-link">
See why
</div>
</div>
<script src="js/kanye.js"></script>
Now within your kanye.js, write something like this:
document.getElementById('timercontainer').appendChild($r.cvs);
Of course this is not portable code. Once you make it work you can externalize the container ID as a parameter.
I've done some research and nothing seems to be working. Here is the HTML followed by the JavaScript I am putting together. What I am trying to do is set it up so that whenever dashboard_gear_options is clicked, it toggles the appropriate hidden options row. Each block of code exists multiple times at different locations on the page. I tried using this, find, parent, next and children to no avail.
HTML:
// start block
<div class="content_block_holder">
<div class="content_top">
<div class="dashboard_gear_options"></div>
<div class="dashboard_gear_divider"></div>
</div>
<div class="dashboard_holder">
<div class="hidden_options_row"></div>
</div>
</div>
// end block
// start block
<div class="content_block_holder">
<div class="content_top">
<div class="dashboard_gear_options"></div>
<div class="dashboard_gear_divider"></div>
</div>
<div class="dashboard_holder">
<div class="hidden_options_row"></div>
</div>
</div>
// end block (etc..)
JS:
$(document).ready(function(){
$('.dashboard_gear_options').click(function(){
$(this).parent('.content_block_holder').find('.hidden_options_row').toggle();
});
});
Try using closest([selector]) ( http://api.jquery.com/closest/ ) instead of parent in your selector. It will traverse up the tree and find "content_block_holder". parent([selector]) will just check the immediate parent and return an empty set if it doesn't match the selector provided.
$(document).ready(function(){
$('.dashboard_gear_options').click(function(){
$(this).closest('.content_block_holder').find('.hidden_options_row').toggle();
});
});
JSFiddle based on your code: http://jsfiddle.net/gK7yM/
try this
$(this).closest('.content_block_holder').find('.dashboard_holder').find('.hidden_options_row').toggle();
Also this chain works:
$(this).parent().next('.dashboard_holder').children('.hidden_options_row').toggle();
or
$(this).parent().next('.dashboard_holder').find('.hidden_options_row').toggle();
I have a page with two divs in it, one inside the other like so:
<div id='one'>
<div id='two'></div>
</div>
I want div one to change class when it is clicked on, then change back when div two is selected.
I'm completely new to javascript, but I've managed to find a simple command that makes div one change when I click it.
<div id='one' class='a' onclick="this.className='b';">
<div id='two'></div>
</div>
Now I just need an equally simple way to change div one back when number two is clicked.
I've tried changing "this.className" to "one.classname," and for some reason that worked when I was working with images, but it doesn't work at all with divs
<div id='one' class='a' onclick="this.className='b';">
<div id='two' onclick="one.className='a';">
This does not work.
</div>
</div>
Essentially I'm wondering if there is a substitute for the javascript "this" that I can use to target other elements.
I've found several scripts that will perform the action I'm looking for, but I don't want to have to use a huge, long, complicated script if there is another simple one like the first I found.
You can use document.getElementById
<div id='two' onclick="document.getElementById('one').className='a'; return false;">
This does not work.
</div>
This would work:
document.getElementById('one').className = 'a';
you could get the element by id with:
document.getElementById("one")
Basically what I have is this:
<body>
<div class="class1">
</div>
<div class="class2">
</div>
<div class="class3">
</div>
...
</body>
I have no idea why the site creator used classes instead of IDs (they're unique), but it doesn't really matter as I'm writing a GM script and so getElementsByClassName('')[0] effectively does the same thing.
How can I insert an element between the first and second div?
Create your own insertAfter function
you can use JQuery it very simple
$(".class1").after( document.createTextNode("Hello") );