I have an iFrame and a div with content in it. I want to delete the div via JavaScript, is that possible and how could I do that?
I don't want to just not display it (eg. display: none via CSS) but remove it from the HTML of the site. I have basic knowledge of JavaScript but don't have any experience working with an iFrame.
You can use
$("#iFrameId").contents().find("#yourDiv").empty();
It is better to use remove()
example: $("#iFrameId").contents().find("#yourDiv").remove();
Explanation
empty() will remove all the contents of the selection.
remove() will remove the selection and its contents and all the event handlers associated with it.
For reference:
http://api.jquery.com/remove/
http://api.jquery.com/empty/
You can try something like:-
frame.removeChild(//pass div id here);
Note: I don't know jQuery so please don't give me an answer how how to do it using jQuery.
I have multiple divs. I want to know how I could access it and change its specific color when clicked using JavaScript.
I am not looking for a solution like document.getElementsByTagName("div")[0] because it requires inputting a seperate number for each div.
I was hoping there was a simple solution somewhat like this.
<div onClick="change();"><h1>Hi</h1><div>
<div onClick="change();"><h1>Hi</h1><div>
<div onClick="change();"><h1>Hi</h1><div>
<script>
function change(){
this.style.backgroundColor = "red";
}
</script>
Since you don't want to learn jQuery (or presumably, non-inline events), consider:
<div onclick="change(this)"><h1>Hi Dave!</h1></div> <!-- use closing tags -->
<div onclick="change(this)"><h1>Hi Thomas!</h1></div>
function change(elm) {
elm.style.backgroundColor = 'red'
}
Note that the context (this) of the inline event handler code (as specified in the attribute) is the element which was the target of the event - for this case it will be the specific DIV element that was clicked. We then simply pass the element into the callback function so we can use it generically.
Also, in the initial markup, the div elements were not closed and led to nesting. With the corrections, the above approach works to complete the task. (The fiddle code assigns to window.change directly, but it's otherwise the same concept.)
Of course, learning jQuery (or a different) high-level framework will probably pay off quite quickly. Using inline event-handlers is .. very "old school".
This would be more easy.
<div onclick="changeColor(this)">Some text!</div>
<p>A paragraph, that will have no change by click</p>
For JavaScript write this:
function changeColor(div) {
div.style.backgroundColor = #hexvalue
}
This will change the background color of the div and not the <p>. You can set any css value for any element by using this jQuery code.
However, for me the jQuery was pretty easy! :) But as you wish.
I know the title sounds quite easy but the real problem is the markup. I have a link in a div which also in another div but the textarea and the paragraph are in another div so that's why I am having problem on how to show and hide elements in a completely different markuped div from a completely different markuped div.
I saw .parent() and .children() and .siblings(). But they couldn't help me or I think that I was not able to take help of those.
Here's the fiddle.
Here is the JS I tried:
$(".no_link").click(function(e) {
e.preventDefault();
});
$(".edit_offer").on('click', function() {
$(this).parent().parent().siblings().children("textarea").toggle();
});
You can use these selectors, but it will rely on the class username being in the heirarchy as you have in your code:
$(".edit_offer").on('click', function () {
$(this).closest('.username').find("textarea").toggle();
});
jsFiddle example
.closest() will traverse up the DOM until it hits the element with class username, then .find() will go down through the children looking for the textarea.
I did it using find(). http://jsfiddle.net/SZUT8/2/ To make the script more accurate and future-proof you could consider adding a class to the paragraph and matching it, as in here: http://jsfiddle.net/SZUT8/4/
You could always assign an ID (or a class, for multiple) to each of the desired elements ("p" and "textarea" in your case). Then use your ID/class to reference them for the show() or hide() methods, rather than navigating the DOM via parent(), sibling() and children().
Then your click handler will only need the line:
$('#idOfElement).toggle();
I have this inline javascript, is there any way it could be made unobtrusive? thanks.
<a href="/uploads/status/image/52/Zombatar_1.jpg" onclick="displayLightBox(this); return false;">
<img alt="Thumb_zombatar_1" src="/uploads/status/image/52/thumb_Zombatar_1.jpg">
</a>
As you've tagged the question with jQuery, I'll give you a jQuery answer. Your a element currently has no identifying characteristic other than its href attribute. It would be easiest to give it an id and then use an id selector. The key is simply find some characteristic by which you can identify the element you want to target.
If an id or a class is not an option, use an attribute selector:
$("a[href='/uploads/status/image/52/Zombatar_1.jpg']").click(function() {
displayLightBox(this);
return false;
});
Notice that I've removed the random false;; from your inline event handler as as far as I can tell it serves no purpose whatsoever.
Update (see comments)
As you have multiple elements to bind the event handler to, your best bet will probably be a common class. You can then use a class selector:
$(".myLink").click(function() {
displayLightBox(this);
return false;
});
The click event handler is bound to all elements in the matched set. When it executes, this refers to the clicked element.
Definitely a good idea to keep your HTML markup and JavaScript code separate. I would recommend applying the onClick behavior to the link after it has been rendered. In my example, I use jQuery to bind the event handler function to the link:
$('#element_id').click(function() {
displayLightBox(this);
return false;
});
If you're writing large web applications, separating your business logic and presentation is essential for writing maintainable and supportable code.
Your jQuery selector will vary depending on how it's placed on the page. If you could provide the HTML context in which that link is created, I can provide a better suited jQuery selector.
I have web layout, which can contains several links on it. Those links are dynamically created, using AJAX functions. And it works ok.
But, I don't know how can I work with those "dynamically created links" (ie. how to call some JS or jQuery function if I click on them). I guess that browser can not recognize them, since there are created after page is loaded.
Is there some function, that can "re-render" my page and elements on it?
Tnx in adv on your help!
You can use the 2 following methods jQuery provides:
The first one, is the .live() method, and the other is the .delegate() method.
The usage of the first one is very simple:
$(document).ready(function() {
$("#dynamicElement").live("click", function() {
//do something
});
}
As you can see, the first argument is the event you want to bind, and the second is a function which handles the event. The way this works is not exactly like a "re-rendering". The common way to do this ( $("#dynamicElement").click(...) or $("#dynamicElement").bind("click", ...) ) works by attaching the event handler of a determinate event to the DOM Element when the DOM has properly loaded ($(document).ready(...) ). Now, obviously, this won't work with dynamically generated elements, because they're not present when the DOM first loads.
The way .live() works is, instead of attaching the vent handler to the DOM Element itself, it attaches it with the document element, taking advantage of the bubbling-up property of JS & DOM (When you click the dynamically generated element and no event handler is attached, it keeps looking to the top until it finds one).
Sounds pretty neat, right? But there's a little technical issue with this method, as I said, it attaches the event handler to the top of the DOM, so when you click the element, your browser has to transverse all over the DOM tree, until it finds the proper event handler. Process which is very inefficient, by the way. And here's where appears the .delegate() method.
Let's assume the following HTML estructure:
<html>
<head>
...
</head>
<body>
<div id="links-container">
<!-- Here's where the dynamically generated content will be -->
</div>
</body>
</html>
So, with the .delegate() method, instead of binding the event handler to the top of the DOM, you just could attach it to a parent DOM Element. A DOM Element you're sure it's going to be somewhere up of the dynamically generated content in the DOM Tree. The closer to them, the better this will work. So, this should do the magic:
$(document).ready(function() {
$("#links-container").delegate("#dynamicElement", "click", function() {
//do something
});
}
This was kind of a long answer, but I like to explain the theory behind it haha.
EDIT: You should correct your markup, it's invalid because: 1) The anchors does not allow the use of a value attribute, and 2) You can't have 2 or more tags with the same ID. Try this:
<a class="removeLineItem" id="delete-1">Delete</a>
<a class="removeLineItem" id="delete-2">Delete</a>
<a class="removeLineItem" id="delete-3">Delete</a>
And to determine which one of the anchors was clicked
$(document).ready(function() {
$("#links-container").delegate(".removeLineItem", "click", function() {
var anchorClicked = $(this).attr("id"),
valueClicked = anchorClicked.split("-")[1];
});
}
With that code, you will have stored in the anchorClicked variable the id of the link clicked, and in the valueClicked the number associated to the anchor.
In your page initialization code, you can set up handlers like this:
$(function() {
$('#myForm input.needsHandler').live('click', function(ev) {
// .. handle the click event
});
});
You just need to be able to identify the input elements by class or something.
How are these links dynamically created? You can use use the correct selector, given that they are using the same class name or resides in the same tag, etc.
consider the html form
<form>
<input type="text" id="id" name="id"/>
<input type="button" id="check" name="check value="check"/>
</form>
jquery script
$('#check).click(function() {
if($('#id).val() == '') {
alert('load the data!!!!);
}
});
here on clicking the button the script check the value of the textbox id to be null. if its null it will return an alert message....
i thin this is the solution you are looking for.....
have a nice day..
Noramlly , the browser process response HTML and add it to DOM tree , but sometimes , current defined events just not work , simply reinitialize the event when u call the ajax request ..
All you need to do to work with dynamically created elements is create identifiers you can locate them with. Try the following code in console of Firebug or the developer tools for Chrome or IE.
$(".everyonelovesstackoverflow").html('<a id="l1" href="http://www.google.com">google</a> <a id="l2" href="http://www.yahoo.com">yahoo</a>');
$("#l1").click(function(){alert("google");});
$("#l2").click(function(){alert("yahoo");});
You should now have two links where the ad normally is that were dynamically created, and than had an onclick handler added to bring up an alert (I didn't block default behaviour, so it will cause you to leave the page.)
jQuery's .live will allow you to automatically add handlers to newly created element.
If your links are coming in via AJAX, you can set the onclick attributes on the server. Just output the links into the AJAX like this:
Holy crap I'm a link
The return false makes sure the link doesn't reload the page.
Hope this helps!