I need to swap the image out when it's moused over. It should be using innerHTML as well I believe.
<body>
anime
ponies
<h1 class="panel">What fandom is better?</h1>
<div class="anime"> <img src="img/anime.png"> </div>
<div class="pony"> <img src="img/pony.png"> </div>
<p id="answer">Choose One</p>
</body>
/**
This is for element changes upon mousesing over of the area
*/`
document.getElementsByClassName("anime")[0].onmouseover=
function(){
orangeBorder1();
mouseAnime();
}
document.getElementsByClassName("pony")[0].onmouseover=
function(){
orangeBorder();
mousePony();
}
function mousePony(){
document.getElementById("pony").src="pony1.png";
}
I don't know if your code is copied wrong but you don't have anything with an id of pony
getElementById will look for a tag with an attribute of id, specify that and your code should work.
id should be unique within the page. You should also give the div a id too instead of querying on the classname
Related
I want to make an HTML element reference like this
<html> X
- description -
<head> X
- description -
<body> X
- description -
The description of the element is hidden by default so when I click on the "X" or the DIV that contains that element description, the description shows up or hide when I click it again.
This is my HTML code:
<h1>HTML Reference</h1>
<div id="reference-list">
<div class="list-element"><html></div>
<div class="element-desc">Here's go description</div>
<div class="list-element"><head></div>
<div class="element-desc">Here's go description</div>
</div>
I tried with jQuery but I dont know how to select the specific div containing the description of that element, since all the divs have the same class (otherwise I will have to create 100 class for each HTML element).
What I tried is this:
<script>
$(document).ready(function(){
$(".list-element").click(function(){
$(".element-desc").toggle();
});
});
</script>
This doesn't work since it show/hide the description of all the elements on the site.
You can use .next() if thats is the correct position of your element.
$(document).ready(function(){
$(".list-element").click(function(){
$(this).next().toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>HTML Reference</h1>
<div id="reference-list">
<div class="list-element"><html></div>
<div class="element-desc">Here's go description</div>
<div class="list-element"><head></div>
<div class="element-desc">Here's go description</div>
</div>
You're selecting all the element descriptions with the $(".element-desc") selector. Try doing this instead:
$(document).ready(function(){
$(".list-element").click(function(){
$(this).next().toggle();
});
});
Using next selects the next element. Basically you want to make your selector more specific and using next is one example of how to do so
I am stuck with this thing.May be an immature question.I dont know,I am pretty new to programming.I want to get a particular elements inner html from DOM of the page.The problem is the page is so complex it has so many classes subclasses href,span and all kind of things.Here is what it looks like from the POINT OF VIEW OF MY REQUIRED CLASS(there are a lot of other class and id's but this is the navigation to my required class,I skipped others.)
<html>
<head></head>
<body>
<div class=
<span style=
<iframe class=
#document
<html id=
<body class=
<div class=
<div id=
<div id=
<div class=
<div class=
<span id=
<a class=
<div class= "required class"
</div>
</a>
<span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</iframe>
</span>
</div>
</body>
<html>
Is there anyway to get the particular element using getelementbyID,getelementsbyClassName or any javascript property ?
Is this the correct one ?
document.getElementById('main').getElementsByClassName('test');
IF so how ?
I am not getting any output so I was was wondering this method is right or not..
Thanks in advance.
Assuming that your iframe is loaded from the same domain and you want to access the contents within this iframe, you will have to do something like:
document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByClassName('required class');
Take a look at this jsFiddle for example which loads fiddle.jshell.net in its iframe and applies a red color to the first editor found. Code of which is as belows:
document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByClassName('CodeMirror-scroll')[0].style.backgroundColor="red";
If you want the inner HTML of a DOM element then here is what you can do,
First access the element by it's id and use innerHTML to get the HTML content inside of it as,
var x = document.getElementById("main").innerHTML;
alert(x);
You are not getting proper output because you are not referencing the object and not accessing it's HTML content with innerHTML
EDIT: To access elements by class names you can use below script,
var x = document.getElementsByClassName("main");
for(var i=0;i<x.length;;i++){
alert(x[i].innerHTML);
}
I am dynamically assigning the div id based on the api call back data. For example I have a bunch of data returned which is appended to a div and I can assign the div id with a unique ip address. I have full control over what I can assign i.e. DIV id or class or whatever..
I have attached an example of what the output looks like and hopefully it will clarify what i am looking for.
What I want to be able to achieve is when an endpoint link is clicked, it will show the respective div and hide all other DIV data boxes.. The endpoint links can made clickable and i can add onclick scripts to them or whatever needs to be done
Whether we use the div id or class name i am not fussed.
This should work just fine.
Assign your div with a class, in the demo i'm using EndPoint. The onclick function will use the class to find the div element and hide it. Then it will use this the element used to trigger the function, target the div within that element and show it.
$('.EndPoint').on('click', function () {
$('.EndPoint').find('div').hide();
$(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EndPoint">
End Point [0]
<div><b>IP Address:</b> 216.12.145.20</div>
</div>
<div class="EndPoint">
End Point [1]
<div><b>IP Address:</b> 172.230.105.123</div>
</div>
<div class="EndPoint">
End Point [2]
<div><b>IP Address:</b> 206.204.52.31</div>
</div>
If you don't understand anything please leave a comment below and I will get back to you as soon as possible.
Edit - jQuery Append with onclick
var IPs=["216.12.145.20","172.230.105.123","206.204.52.31"];
//Foreach value in array
$.each(IPs, function(i,v) {
//Append to id:container
$('#container').append('<div class="EndPoint">End Point ['+i+']<div><b>IP Address:</b> '+v+'</div></div>');
});
$('.EndPoint').on('click', function () {
$('.EndPoint').find('div').hide();
$(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
I hope this helps. Happy coding!
Since elements are dynamically generated it's better to do with classes IMO.
HTML
<div id="endpoint1">
<a href='#' class='clicker'>End Point 1</a>
<p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint2">
<a href='#' class='clicker'>End Point 2</a>
<p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint3">
<a href='#' class='clicker'>End Point 3</a>
<p class='hideThis'>1.1.1.1</p>
</div>
JavaScript (using JQuery)
$('.clicker').on('click', function () {
$('.hideThis').hide();
$(this).next().show();
});
http://jsfiddle.net/ksvexr40/1
If you want to hide the content initially, just add the following CSS class which hides the content initially.
.hideThis{
display: none;
}
my goal is to show an overlay on a div when that div is hovered on. The normal div is called .circleBase.type1 and the overlay is circleBase.overlay. I have multiple of these divs on my page. When I hover over one .cirlceBase.type1, overlays show on every .circleBase.type1. How do I prevent this?
Here is some code:
HTML
<div class="circleBase type1">
<p class="hidetext">Lorem ipsum</p>
<hr size="10">
<strong class="gray hidetext">gdroel</strong>
</div>
<div class="circleBase overlay">
<p class="date">11/12/14</p>
</div>
and jQuery
$(document).ready(function(){
$('.overlay').hide();
$('.date').hide();
$(".circleBase.type1").mouseenter(function(){
$(".overlay").fadeIn("fast");
$('.date').show();
$('.hidetext').hide();
});
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$('.date').hide();
$('.hidetext').show();
});
});
Use $(this) to get current element reference and do like this:
$(".circleBase.type1").mouseenter(function(){
$(this).next(".overlay").fadeIn("fast");
$(this).next(".overlay").find('.date').show();
$(this).find('.hidetext').hide();
});
and:
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$(this).find('.date').hide();
$(this).prev(".circleBase").find('.hidetext').show();
});
usually when I want to target something specific you just give it an ID.
ID's play better in JavaScript than classes.
If you had a specific container, using the container as your starting point is a good route as well
$('#container').find('.something.type1').doSomething();
This is much more efficient for jquery, because it only searches .something.type1 inside of #container.
Well I'm not sure exactly what you're looking to do, but it looks like you want to replace content in some kind of circle with a hover text, but with a fade. To do that you'll have to add some CSS and it would be best to change your HTML structure too.
The HTML should look like this:
<div class="circleContainer">
<div class="circleBase">
<p>Lorem ipsum</p>
<hr>
<strong class="gray">gdroel</strong>
</div>
<div class="overlay" style="display: none;">
<p class="date">11/12/14</p>
</div>
</div>
so your js can look like this:
$(function(){
$(".circleContainer").mouseenter(function(){
$(this).find(".overlay")
$(this).find('.circleBase').hide();
});
$(".circleContainer").mouseleave(function(){
$(this).find('.circleBase').show();
$(this).find(".overlay").hide();
});
});
Here's a working solution that includes some CSS to make it nice. Try taking it out and running it, you'll see the problems right away.
I am trying to clone a DIV to prevent data reputation; this is a frequent thing I want to do over various pages so I don't want to make bug structural changes.
I would like to Clone mApageLeft with the class maContent, and all of its inner div's and content into another div named cloneContent.
I have looked at other examples of Clone, and my attempt does not show anything. Thanks in advance for any help.
<div>
<div>
<div>
<div id="mApageLeft" name="mApageLeft" class="maContent">
<div> header and some text here
</div>
<div> text and image here
</div>
<div> text and another image here
</div>
</div>
</div>
</div>
</div>
<div id="mobileArea">
<div id="mobileMainArea">
headers, links and sme text
<div name="cloneContent" id="cloneContent" class="maContent"></div>
<script>
$(function(){
var $mainAreaClone = $('#mApageLeft').clone();
$('#cloneContent').html($mainAreaClone);
});
</script>
</div>
</div>
Your code works fine when I test it on fiddle. Even after that, if you wanna try something else, you can try append() instead of html() function. Usually when you clone, you want to append the cloned object, you don't want to put is as inner HTML. However, that will also work.