I'm wondering what might be the simplest approach to dynamically changing the contents of a "caption" div to reflect the info corresponding to a specific thumbnail/link in an image gallery.
To be more specific, if you visit this link-- which shows off the awesome Seadragon zoom script btw-- I would like to have a small caption under the image that changes (text) content when a user clicks the different links above; perhaps pulling text from an alt or title attribute and placing in an empty div?
In my case, I'll be using thumbnails instead of text links, so upon clicking these images the user will both initiate the "switchTo" Seadragon event and fill the empty div with corresponding content.
thanks for any guidance here.
If you have the id of the div, the simplest way would be to use innerHTML:
document.getElementById(id).innerHTML = "text";
This is fine for simpler cases, like replacing all of the text in a div. If you want to do something more complicated, like having other html elements inside the div, this method is not the best choice.
If you want to add an html element to the div tag, then you should avoid innerHTML. If you have, say, a variable img that is an img tag, then use this to add it to the div:
document.getElementById(id).appendChild(img);
If you want to do anything more complicated than this, you should probably consider using a nice framework like jQuery--it might be too much for something like this, but if you plan to do anything else, then a framework would be worth using.
If you want to do this with jQuery, it can be done using some of the following functions:
var div = $("#id");// jQuery uses CSS selectors to get elements.
div.append("New content");// Puts the new content at the end.
div.empty();// Gets rid of everything inside the div.
div.append(element);// You can also append elements.
// For example, you can create and append an image to the div:
var img = $("<img>");
img.attr("src", "images/something.png");
div.append(img);
Related
need a kind help from you:
I have this CSS and i want to change the word "ACTIVE" into another word after clicking on a button:
after clicking it should be:
example: body.new.content
My code is:
enter image description here
Could you please help me?
thanks.
Thank you for your answers, my issue is how to perform this:
When i click on the first press button (as you can see in the picture), it will open 2 pop-ups also the second button
enter image description here
enter image description here
This is my html code:
enter image description here
why you need to change css using javascript. It's not a correct way and can't do directly.
For example, if you have a need, try to remove active and add need class in your html content. Keep both type styles in your css. If still having exact need to modify, tell us denarii, let we think through and guide you. Thanks,
I don't think you can interfere in CSS with the way you described it.
you need to add a new class using classList.add("the name of the class you want to add") then append it to the parent div or for example the body with the append() or appendChild() methods then if you want you can style it using .style
I don't recommend you do this, because you'll run into some problems later in the development of your app.
Anyways I can give you a solution for that. Every DOM element has a lots of properties, one of them is classList which is an array of classes that the element has.
You can get it this way: body.classList
So, if you want to remove the class .active from your body you can use the remove() method like this: body.classList.remove('active'). Then if you want to add another class like .new you must use the add method like this: body.classList.add('new'). Make sure there is a 'new' class in css.
I am quite new to the realm of Javascript and the Jquery Library, so bear with me please.
I am manipulating the DOM by adding new divs within a parent div like so:
var newdiv = document.createElement('div');
var addTst = document.getElementById("tst");
addTst.appendChild(newdiv)
<div id ="tst">
//new divs will appear here
</div>
$("#tst div").draggable(); *//things I need to be draggable*
#tst div{
height:50px;
width:50px;
background:red;
margin:20px;
display:inline-block;
}
However I am attempting to use Jquery UI, to target these new elements and make them draggable. (The new divs are added by the user after the initial document loading, without refreshing the Jquery/page).
Of course Jquery only loads once so anything added after remains undraggable.
I already have some AJAX in there, which is loading data fine, but it is quite long and I dont want to re-run the entire AJAX function just to refresh the parent divs contents (Assuming AJAX can update a div with new contents).
To help illustrate I have added a Fiddle:
http://jsfiddle.net/YuGhj/2/
As you can see, the first red box drags fine, but if you add a new child using the button, they are not draggable.
I am most likely totally misunderstanding how jquery/AJAX works.
TL;DR
To put it shortly, I need a way to target elements added dynamically after the first page load, and apply a drag function to them. I assume I need to refresh the div somehow, without losing any contents.
Thanks!
Manipulating the DOM is much easier with jQuery. Here's code to create a div, append it, and call draggable on it:
$('<div/>').appendTo('#tst').draggable();
Demo: http://jsfiddle.net/MvXR3/
A lot of people seem to misunderstand how selecting and binding work. When you do this:
$("#tst div").draggable();
That finds all elements that match "#tst div" at the time the line executes and calls draggable() on those elements. When you add a new element, you need to call draggable() on the new element. The previous call doesn't apply.
I'm working on editing a tooltip plugin (TooltipsY) to use a div instead of the title element for the content of the tooltip. I'm doing this for a multitude of reasons, the primary one being so I can have HTML in my tooltips without causing validation errors.
The problem I'm having is that when changed the content of the tooltip to be the div instead of the title attribute, every link with a tooltip shows the same tooltip content. That's because The div's aren't related to the links in any way so I can't use "this" to select them.
It would work if I knew some way to change $('div.showtip').html(); to this.closest($('div.showtip').html()); (that method won't work because the div isn't a parent or a child of the link) so how can I make the tooltip content the closest div to the link that's being hovered over?
Here is my example: http://jsfiddle.net/sgCCD/2/
Note: The only thing that should need to be changed is the value of the variable showtip.
Also, I don't want a suggestion for a different tooltip plugin, I'm doing this just as much for my own personal experience as I am to improve the functionality of the plugin.
Hope this is what you're looking for:
http://jsfiddle.net/sgCCD/3/
changed this line:
var showtip = $('div.showtip').html();
to this:
var showtip = $(el).next().html();
Theres a way using javascript function to automatically put div tags in all images?
Example:
<div class="example"><img src="..."></div>
I know you didn’t ask for a jQuery-specific solution, but if using jQuery is an option, there’s a pretty easy answer — you can use .wrap():
$('img').wrap('<div class="example" />');
This will wrap all images in a div with class="example".
Of course, this is possible in plain JavaScript as well; loop through all img elements, and for every node, clone it, create a new div, append the clone to it, insert the div into the DOM before or after the original img element, and finally remove the original img element from the DOM.
I'm trying to make a simple image browser for TinyMCE which I am using in my CMS. As part of this I need to detect whether the user has selected an existing image, so I can display the "edit" form instead of the "choose an image form".
var selected_html = ed.selection.getContent();
var $elem = $(selected_html);
console.log($elem);
The first function returns the user selected text from the editor window as a string of HTML. I then would like to use jQuery (although plain javascript is just ok too) to check if this string contains an img tag before subsequently grabbing the src and title attributes for editing.
Now I've got as far as getting the html to turn into an object. But after this I can't manage to search it for the img element. After reading this (How to manipulate HTML within a jQuery variable?) I tried:
$elem.find('img');
But it just comes out as an "undefined" object...
I think I'm missing something fairly obvious here (it is getting late), but after an hour I still can't figure out how to grab the img tag from the selection. :(
Many thanks in advance.
Because the <img> is at the root of the jQuery object, you need to use .filter() instead of .find().
$elem.filter('img');
The .filter() method looks at the element(s) at the top level of the jQuery object, while .find() looks for elements nested in any of the top level elements.
If you're not sure beforehand where the target element will be, you could place the HTML into a wrapper <div> to search from. That way the HTML given will never be at the top.
var selected_html = ed.selection.getContent();
var $elem = $('<div>').html(selected_html);
var $img = $elem.find('img');
Try to see what is really inside your $elem variable. Just do a console.log($elem) using both Firefox and Firebug and you should be able to manage quite alright! ;)