Develop Reference

Using Javascript to show/hide elements depending on content in div

I am relatively inexperienced with JavaScript, and I'm working on a project that's turned into a real trial by fire for me, but hopefully this is a question that has a stupidly straightforward answer.
I'm trying to write a script that will show/hide different links on a page by changing the display style of different links.
I want to use a div element and have different links available if the user drags different images into the div. The links are in clickable pictures.
Example-
I want this linked element 'link' to be displayed only if "First_Image.png" has been dragged and dropped into div2:
<a id='link' href='link.html' style='display: none;'><IMG src="../Image.png"></a>
My div id is "div2", and it starts out empty as such:
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
Images on the page are set up as:
<IMG src="First_Image.png" id="First_Image" draggable="true"
ondragstart="drag(event)">
There are several such droppable images on the page. My attempt at this script is:
<script>
if (document.getElementById("div2").getElementsByTagName('img') == "First_Image")
document.getElementById('link').style.display = 'block';
return (false);
</script>
I'm not sure if my problem is that I'm not getting the information I think I am from the image in the div, or if my simple if statement isn't doing what I think it's doing. :/

If you're trying to get the values from the attributes (as the src is an attribute). You can try out Element.getAttribute.
https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute
document.getElementById("div2").getElementsByTagName("img").getAttribute("src");
Step by step would be:
var id = document.getElementById("div2");
var elem = id.getElementsByTagName("img");
var atr = elem.getAttribute("src");
/* for comparing */
if(atr == "First_Image.png") {
return false;
}
This will produce this: First_Image.png. And also, write this:
return false; /* not (false) */

I think the error is in your comparison
if (document.getElementById("div2").getElementsByTagName('img').src.indexOf("First_Image") > -1)

How can I dynamically set an id within a Javascript loop?

I have a list of Questions, and each of those Questions has a list of Answers (which can be any integer from 1-5). I would like to dynamically create a chart for each Question, using the count of all answers that match a specific "rank"; i.e. all the answers that were a '1', '2', '3', etc.
So what I've done is set a for loop that creates an element for each question; this element is used as a placeholder for the chart. (As an aside, I am using flot charts).
The problem I'm having is trying to name the placeholders dynamically; what I really want is to create something that ends up looking like this:
<div id='chart1'/>
<div id='chart2'/>
etc
The closest I've managed is this:
<div id="'chart'#currentQuestion"/>
which of course gives an id like this: 'chart'1
Later, when I try to append the chart to the div I've created, the following doesn't work:
$("#'chart'"+i).append(div); //where i is the current loop counter
If I use
$("#chart"+i).append(div);
it correctly finds the element 'chart1', 'chart2' etc; but I'm struggling to name the div to match.
Can anyone help? It seems trivial unless you know how to solve it :-)
Edit: As requested, here is the relevant HMTL:
<div id="'chart#currentQuestion'">CHART</div>
SOLVED:
Like this: id="chart#(currentQuestion)" (via a colleague) Thanks for your efforts.

You haveen't close your div correctly. try this code
<div id='chart1' style="border:dashed">
</div>
<br />
<div id='chart2' style="border:dotted">
</div>
<script type="text/javascript" src="jquery_library.js">
</script>
<script type="text/javascript">
function fnc(value){
$("#chart"+value).append('1');
}
</script>
<input type="button" onclick="fnc(1)" value="for div1"/>
<input type="button" onclick="fnc(2)"value="for div2" />

You are using razor syntax, so here how it should be.
// Define your counter
#{long i = 0;}
// On document ready dynamically add your items
$("document").ready(function(){
// Create red divs starting by zero
// after 5 divs stop creating red divs
#for (i = 0;i<5;i++){
#:$("#form").append('<div id="chart' + #(i) + '">Red</div>');
}
});
// I made a button for action, you can choose other ways to invoke this function
$("#form>input").click(function(){
// Your counter is at 4 now
// lets change it to 2
#(i = 2;) // Now your counter is at 2
// Put a blue div into 2nd div starting by 0
$("#chart"+#(i)).append('<div class="blue">blue</div>');
});
this is how you use razor syntax with scripts

HTML document pagination without jQuery

I have a large page having a lot of divs and all these divs are enclosed in a single div. And I have number links on the top of the page equal to the total enclosed divs I have. Now what I want to do is, on click on a number, I want to show only div corresponding to that number and hide all other.
links--> 1 2 3 4 5 6 7 .....
<div id="all">
<div id="mail1">..........</div>
<div id="mail2">..........</div>
<div id="mail3">..........</div>
<div id="mail4">..........</div>
<div id="mail5">..........</div>
<div id="mail6">..........</div>
.....and so on
</div>
I have to do it inside an HTML and that HTML will be stored and may be viewed offline as well, so cannot use jQuery here. Have to do it using JavaScript itself.
Could anybody help me with the JavaScript code here?.

<script type="text/javascript">
var divIds = ["mail1", "mail2", ..., "mailn"];
function showDiv(showId) {
for(var i = divIds.length; i--; ) {
if(divIds[i] === showId)
document.getElementById(showId).style.display = "block";
else
document.getElementById(divIds[i]).style.display = "none";
}
}
</script>
Then your links at the top will look like this:
1
Haven't tested it, but that's the idea. Downsides are you have to maintain the div in 3 places in code
In the var divIds array.
In the html tag itself.
In the links across the top.
You could write some javascript to generate all 3, taking away the maitenance part of it entirely.
As for using jQuery in an offline doc, the best route would probably be to include the text of the jquery.min.js file in the doc itself inside of <script></script> tags. That way you don't have to worry about paths and what-not.

You may do something like that (don't judge me on js coding style, i'm not a js ninja):
window.onload = function() {
var outer = document.getElementById("all");
for (var i=0; i < outer.childNodes.length; i++) {
outer.childNodes[i].addEventListener("click", doSomething);
}
function doSomething() {
// here you can run loop for changing display style for you divs
console.log(this.id);
}
}

I made an unobtrusive example without knowing the div ids:
http://jsfiddle.net/8pQzx/2/
Its more code but this is what you get if you dont want to use a js lib. ;)

How to create an effect higher up in the view than the logic that determines it?

I have a simple if statement in my view that returns x = 0 or 1. Based on this simple result, I want to change the styling of the div that contains the entire section.
<div>
conditional that returns x=1 vs x=0 (and a few displayed items)
based on this loop, restyle the div
</div>
Let's say, if x = 1, I want to make background-color:rgb(210,215,220);
How can I accomplish this? I am not experienced with Javascript but I'm sure any code required would be very simple. Thank you!

Add an ID to your DIV like:
<div ID="colorThis">
conditional that returns x=1 vs x=0 (and a few displayed items)
based on this loop, restyle the div
</div>
Then do this:
if(x==1)
{
​document.getElement​ById('colorThis').style.background = 'rgb(210,215,220)'​​​​;​​​​​​​​​​​​​​
}

<script>
if(x==1)
{
$("#divid").css("background-color","rgb(210,215,220)");
}
</script>
Include jQuery, and give the div's id to divid

How can accomplish a dual div swap on rollover?

I am looking for advice on a way to accomplish this. Given the following:
[Div A (contains an image)]
[Div B (contains a horizontal list of 8 or so text links)]
[Div C (contains text)]
Upon rolling over any link in Div B, how can I have Div A and Div C swap their respective contents out to something different that corresponds to the content of that link?
For example, if one were to rollover a Div B link called "Dogs", then upon that rollover, Div A would replace its contents and display an image of a dog and Div C would replace its contents and display text about dogs.
After rolling over that link, the new Div A and Div C contents will remain in place until a new link is rolled over.
I hope this makes sense. Does anyone have advice on the best way to accomplish this?

Assuming the href points to one resource that contains the content for both, but you can't just inject the entire output of the link into one element, something like this could work:
$('#divB a').mouseover(function() {
//get images from link, inject into divA
$('#divA').html('<strong>Loading...</strong>')
.load($(this).attr('href') + ' img');
//get divs from link, inject into divC
$('#divC').html('<strong>Loading...</strong>')
.load($(this).attr('href') + ' div');
});

Hmm... this should be pretty simple with jQuery (compared to some of the other answers here):
If you're unfamiliar with jQuery, the $() is a shortcut for calling jQuery(), and using
$(document).ready(function() {
// put all your jQuery goodness in here.
});
is a way to make sure jQuery fires at the right time. Read more about that here.
So first, add a class (ie .dogs) to each <a> element in your #divB list. Next, give each of the corresponding images the same class, and contain each of your text blocks in #divC in divs with the same class as well. The HTML would look something like this:
<div id="divA">
<img src="dogs.jpg" class="dogs" />
<img src="flowers.jpg" class="flowers" />
<img src="cars.jpg" class="cars" />
</div>
<div id="divB">
<ul>
<li>Dogs</li>
<li>Flowers</li>
<li>Cars</li>
</ul
</div>
<div id="divC">
<div class="dogs"><p>Text about dogs.</p></div>
<div class="flowers"><p>Text about flowers.</p></div>
<div class="cars"><p>Text about cars.</p></div>
</div>
Then use the following jQuery, putting this up in the <head> section of your HTML doc:
$(document).ready(function() {
$('a.dogs').hover(function() {
$('#divA img').hide("fast");
$('#divA img.dogs').show("fast");
$('#divC div').hide("fast");
$('div.dogs').show("fast");
});
});
We say when the document is ready, when you hover over the <a> element with the .dogs class, perform a function. That function will hide all of the images in #divA and immediately show the image with the .dogs class. Then it will hide all of the divs in the #divC and immediately show the div with the .dogs class.
You can do the same thing twice more for .flowers and .cars, or however many you have.
Keep in mind, there are more efficient ways of doing this too, if you're interested in looking deeper into jQuery, but this will be a solid way to get started in helping you understand exactly what jQuery is doing. And it keeps the script OUT of the HTML body, too!

You can change a div's contents with something like this:
<script type="text/javascript">
function over() {
var a = document.getElementById('a');
var c = document.getElementById('c');
a.style.backgroundImage = "url(/path/to/image)";
c.innerHTML = "<b>Dogs rock</b>";
}
</script>
<div id="a"></div>
<div id="b" onmouseover="over();"></div>
<div id="c"></div>
Then all you need to do is add whatever other div's you want and write code to change them appropriately. Set the initial state of A and C using css, or just call the over() function on page load.