We Keep Coding

How to remove all elements in a div after a certain div

So I have a div that is drawing in dynamic elements at its bottom and I want to hide these elements, no matter what their IDs are using javaScript/jQuery. Basically my HTML looks like this:
<div class="right-panel">
<div class="info">Text</div>
<form id="the-form">
<input type="hidden" name="first-name" value="">
<input type="hidden" name="last-name" value="">
<input type="hidden" name="state" value="">
</form>
<script>javaScript</script>
<div id="dynamic-id-1">Advertisement 1</div>
<div id="dynamic-id-2">Advertisement 2</div>
</div>
I'd like to ensure that the "dynamic-id-1" and "dynamic-id-2" divs are always removed or hidden no matter what their ID's are (their IDs are subject to change). How do I target these elements without targeting their IDs?
Edit--I tried this, but my approach seems limited, and I couldn't get it to work with multiple divs, even when chaining:
$('#the-form').next().hide();
(Note: unfortunately they don't have a class, there are multiple divs, and the IDs are always completely different. I was hoping there might be novel way to target the last two divs of the wrapping div and hide them)

If the script tag is always before the div's that need removing you could do this -
$('.right-panel > script').nextAll('div').remove();
http://jsfiddle.net/w6d8K/1/
Based on what you tried you could do this -
$('#the-form').nextAll('div').hide();
http://jsfiddle.net/w6d8K/2/
Here are the docs for nextAll() - https://api.jquery.com/nextAll/

The simplest route would be to add classes to the dynamic elements. Something like:
<div class="removable-element" id="dynamic-id-1">Advertisement 1</div>
Then, you can do something like:
$(".right-panel .removable-element").remove()

If only one div at a time is generated dynamically. Add this to dynamic generation:
$('#the-form + div').hide();
Another method to achieve the same (not preferred) is:
$('#the-form').next('div').remove();

You are saying you don't want to target their "id", but is there some specific part in the id that will remain the same ?
like for instance "dynamic-id-" ?
If this is the case you can target them by using a "like selector". The code below would target all divs whose ID is starting with "dynamic-id"
$('div[id^=dynamic-id]').each(function () {
//do something here
});

Target the class instead of the dynamic ID.
<div class="element-to-remove" id="dynamic-id-1" />
<div class="element-to-remove" id="dynamic-id-2" />
$('.right-panel . element-to-remove').remove();

How to create a modal window using jquery and javascript to help a user make a choice

I need to create a modal window that contains a list of checkboxes. A user can select a checkbox (or several checkboxes). Depending on a user choise, a section(s) next to the list must appear or disappear OR change its opacity and ZOOM.
An example of what I need is below:
http://www.devart.com/dbforge/mysql/studio/ - here you can click the blue button in the sidebar (what product is right for me?)
Here is also similar example (but not exactly what I need) http://www.kaspersky.com/help-me-choose
So, I can create a modal in the way like this:
(if there are betters ways to do this, please tell me)
<script>
$(document).ready(function () {
$('.showmodal').on('click', function () {
$('.modal').fadeIn(1000);
});
$('.hidemodal').on('click', function () {
$('.modal').fadeOut(1000);
});
});
</script>
Then I can create a list of check boxes:
<div class="modal">
<div>
<b>What do you want to do?</b><br>
<input type="checkbox" name="option1" value="a1" checked>Question 1<br />
<input type="checkbox" name="option2" value="a2">Question 2<br />
</div>
</div>
Then I can creale a number of DIVs next to the checkboxes list and using jquery change its opacity when the mouse cursor is on top of the DIV... but
Q#1 HOW CAN I ANIMATE ITS ZOOM ? like in the first example.
Q#2 (the most important) HOW CAN I LINK...A CHECKBOX STATE WITH A SPECIFIC DIV? I mean, how can I show a specific div depending on what a checkbox is selected (or several)? What should I use: if else construction... or switch - case? Or something else ?
Thank you.

Use Twitter Bootstrap: modal
It's easy to use and save you from lots of work.
example as in: http://www.devart.com/dbforge/mysql/studio/
you could use jquery, suppose the images are:
<img src=".." id="img1" style="display: none;"/>
<img src=".." id="img2" style="display: none;"/>
Now the checkboxes:
<input type="checkbox" class="img1">
Now jquery:
$('input["checkbox"]').is(":checked"){
var img = $(this).attr("class");
$("#" + img).css("display","block"); //do your own stuff such as zoom..etc.. as you were saying
// add for uncheck, to hide the picture etc...
}

search html div and display results on different page

I want to search multiple HTML files from a separate page, where I search for text from all the divs which has a specific id for each, whole id containing matched search term will be displayed on the search page in list.
The div list looks like this :
<body>
<div class='vs'>
<div id='header 1'>content 1 here </div>
<div id='header 2'>another text </div>
<div id='header 3'>whatever </div>
</div>
</body>
Please note that I want to perform search from different page and want to display results there with links to the searchable page.
For now I was searching like this :
HTML
<body>
<input type="text" id='search' />
<div class='vs'>
<div id='header 1'>content 1 here </div>
<div id='header 2'>another text </div>
<div id='header 3'>whatever </div>
</div>
</body>
JavaScript
$('#search').on('input', function () {
var text = $(this).val();
$('.vs div').show();
$('.vs div:not(:contains(' + text + '))').hide();
});
It is working on the fiddle here, but I don't want it to work like this, I want to do the search from a separate page remotely and display results there with link to this page.

Solution with jQuery and AJAX:
<form id="searchForm">
<input type="text" id="search"/>
<input type="submit" name="Search!" />
</form>
<div id="resultContainer">
</div>
<script type="text/javascript">
$("#searchForm").submit(function(e) {
e.preventDefault();
var results = $("#resultContainer");
var text = $("#search").val();
results.empty();
$.get("http://example.com/", function(data) {
results.append($(data).find("div:contains(" + text + ")"));
});
});
</script>
Fiddle (This fiddle enables you to search for content on the jsfiddle page, try for example JSFiddle as search term.)
Note however that this does not work cross-domain, because browsers will prevent cross-site scripting. You didn't describe your use-case clear enough for me to know whether you're okay with that.

You'll want to look at using PHP file_get_contents to retrieve the HTML contents of the external page, and from there analyze the data in the <div>s that you are interested in. Ultimately, you'll want to store each individual search term in a JavaScript array (you can create JavaScript arrays dynamically using PHP), and then create search functionality similar to example you posted to search all the elements in your array.
So on page load, you'll want to have a <div> in which you are going to list all the elements from the array. You can list these by looping through the array and displaying each individual element. From there, you will want to call a function every time the user enters or deletes a character in the <input> box. This function will update the <div> with an updated list of elements that match the string in the <input> box.
This is the theory behind what you are trying to accomplish. Hopefully it will give you some direction as to how to write your code.
Update:
If you're looking for a JavaScript only solution, check out a JavaScript equivalent of PHP's file_get_contents: http://phpjs.org/functions/file_get_contents/
From here, you can maybe look at using .split to break up the list. Ultimately, you're still trying to store each individual search term as an element in an array, it's just the method that you retrieve these terms is different (JavaScript as opposed to PHP).
Perhaps I was emphasizing too much on PHP, perhaps it's because it's the web development language I'm most familiar with. Hope this JavaScript-only solution is helpful.

Pressing Button Increments data then push to Multidimentional Array

I have this problem regarding about when I pushed the button it adds another element plus the name of the element also increments well in array, kind of hard to explain but I'll provide some screenshots.
I searched through this site saw a bunch of solutions and whatnots, unfortunately I can't seem to apply it on my problem.
Here are the screenshots of what is my desire output.
If I press the Add button, another fieldset would show up above it
The result would be
So if I press the "Add" button again, it would show up another never ending cycle of fieldset with corresponding incremented input type names.
Code:
Layout of the Fielset
<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;" id="fieldset_fblikeus">
<div class="condition">
<div class="clear"></div>
<div>Label</div>
<div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div>
<div class="clear" style="padding-top:5px;"></div>
<div>URL to Like</div>
<div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div>
<div class="clear" style="padding-top:5px;"></div>
</div>
</fieldset>
Code to initiate the function
<a onclick="fb_likeus_add();">Add</a>
function fb_likeus_add() {
var fieldset_data = '<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;"><div class="condition"><div class="clear"></div><div>Label</div><div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div><div class="clear" style="padding-top:5px;"></div><div>URL to Like</div><div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div><div class="clear" style="padding-top:5px;"></div></div></fieldset>';
$("#fb_likeus_td").prepend(fieldset_data);
}
The main problem is on when I press the add button how to increment the names of an input element while prepending the data to the div, I have no idea on where/what to start with. But I've thought of something what it should look like.
Array = [
div1 ['name_1', 'url_1'],
div2 ['name_2', 'url_2'],
div3 ['name_3', 'url_3'],
div4 ['name_4', 'url_4'],
div5 ['name_5', 'url_5']
and so on, it increments when you click the add button.
];
It's kind of hard to explain, still hope you guys understand my problem.
Would be glad if you guys help me, it means a lot. Thanks in advance.

One solution to this is to have a hidden 'template' div somewhere on the page that contains the markup that you want to insert. In this specific case the markup is relatively simple, so you could get away with just storing the template markup as a JavaScript string, but that's generally less maintainable over time than using a hidden div on the page.
In any case, once you have your template markup, you just need to add a small amount of JavaScript code to keep track of how many times you've added a new fieldset to the page. With that, you can update your fb_likeus_add() function to perform a simple string-replacement on the template markup, inserting the correct sequence numbers before you prepend it to the div.
That may sound a bit involved but it really takes very little code:
//initialize this when the page loads
var numAdded = 0;
function fb_likeus_add() {
//increment the counter
numAdded++;
//grab the template html
var templateHtml = $("#template").html();
//write the new count into the template html
templateHtml = templateHtml.replace(/label_/g, "label_" + numAdded)
.replace(/url_/g, "url_" + numAdded);
//prepend the updated HTML to the document
$("#container").prepend(templateHtml);
};
Here's an example: http://jsfiddle.net/Dw8e7/1/

Javascript Persisting image visibility with a cookie/checkbox

this is my first question on Stack Overflow, I'm new to Javascript (have been teaching myself Python to get a feel for coding) and thought I'd try my hand at a simple web app to see how easy it is to translate my knowledge of Python into Javascript.
Basically the app will let you know when your favourite fruit etc is in season. So I have a list of checkboxes on one page 'fruitpicker.html' and corresponding images on another 'seasonalguide.html' (The images are just pictures of a calendar with the fruits season shaded etc).
I have a cookie that persists the checkbox state and a piece of external JS that toggles image visibility depending on the state of its corresponding checkbox.
Most of the cookie someone else was using on the web, so it works great, however the image vis JS is giving me trouble.
I've written what I think it should be but it didn't work and no matter how much I tinker around with it, nothing happens.
I'm sure it's something really dumb but anyway, here's the code...
The broken image vis JS:
function toggleVisibility(checkId, imageId) {
var imgEl = document.getElementById(imageId);
var checkEl = document.getElementById(checkId);
if (checkEl.checked) {
imgEl.style.visibility="hidden";
imgEl.style.display="none";
}
else {
imgEl.style.visibility="visible";
imgEl.style.display="inline-block";
}
}
By the way, if the line: var checkEl = document.getElementById(checkId);
is deleted the code works but image state doesn't persist. This is as far as I have gotten.
A few of the checkboxes in fruitpicker.html:
<html>
<head>
<title>Fruit Picker</title>
<script type="text/javascript" src="cookie.js"></script>
</head>
<body onload="restorePersistedCheckBoxes();">
<label for= "chklogo">Braeburn</label>
<input type= "checkbox"
id= "chkBraeburn"
onChange= "toggleVisibility('braeburnItem');
toggleVisibility('braeburnSeason');
persistCheckBox(this);" /><br>
<label for= "chklogo">Fuji</label>
<input type= "checkbox"
id= "chkFuji"
onChange= "toggleVisibility('fujiItem');
toggleVisibility('fujiSeason');
persistCheckBox(this);" /><br>
<label for= "chklogo">Golden Delicious</label>
<input type= "checkbox"
id= "chkgolldenDelicious"
onChange= "toggleVisibility('goldenDeliciousItem');
toggleVisibility('goldenDeliciousSeason');
persistCheckBox(this);" /><br>
<label for= "chklogo">Granny Smith</label>
<input type= "checkbox"
id= "chkGrannySmith"
onChange= "toggleVisibility('grannySmithItem');
toggleVisibility('grannySmithSeason');
persistCheckBox(this);"/><br/>
</body>
</html>
And here is the Seasonal Guide page:
<html>
<head>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="imageVisibility.js"></script>
</head>
<body>
<img id="imgGuide"
src="Images/Calendar/calendarHeader.png"
align="left"/>
<img id="braeburnItem"
src="Images/Produce/Fruit/BraeburnApple.png"
style="float:left; display:none;" />
<img id="braeburnSeason"
float="top"
src="Images/InSeason/InSeasonApr.png"
align="left"
style="display:none"/>
<img id="fujiItem"
src="Images/Produce/Fruit/FujiApple.png"
style="float:left; display:none;" />
<img id="fujiSeason"
float="top"
src="Images/InSeason/InSeasonMar.png"
align="left"
style="display:none;"/>
<img id="goldenDeliciousItem"
src="Images/Produce/Fruit/GoldenDeliciousApple.png"
style="float:left; display:none;"/>
<img id="goldenDeliciousSeason"
src="Images/InSeason/InSeasonFeb.png"
align="left"
style="display:none;"/>
<img id="grannySmithItem"
src="Images/Produce/Fruit/GrannySmithApple.png"
style="float:left; display:none;"/>
<img id="grannySmithSeason"
src="Images/InSeason/InSeasonApr.png"
align="left"
style="display:none;"/><br>
<table width="170px" height="70px">
<tr>
<td>
<a href="Main.html" id="back" title="about" class="button">
<img src="Images/Buttons/backButton.png" align="right">
</td>
</tr>
</table>
</body>
</html>
The question was getting long so I didn't include the cookie, but I can if it's useful.
Any help is appreciated, Thanks

I'm noticing two issues here.
First off, you're using two separate pages, but document.getElementById can only access the elements of the page you're on. So, your lines:
var imgEl = document.getElementById(imageId);
var checkEl = document.getElementById(checkId);
have to fail, because they are trying to access elements in the two pages. Whichever page you're running the script on, one of those lines will return null. Your question doesn't describe how the two separate HTML files relate to each other, so I can't help you fix this (Does the first load the second whenever a checkbox is clicked, or are the two pages loaded in frames or iframes of a parent page?).
The second issue is that your toggleVisibility function is defined with two parameters, but your code (for example):
onChange= "toggleVisibility('grannySmithItem');
toggleVisibility('grannySmithSeason');
calls the method (twice) with only one parameter. If we're talking about the same function (you might have a different function definition on each of the two pages), then the function can never identify the correct image, because the imageId is never supplied.