We Keep Coding

Insert Javascript variable value into HTML tag id field

I am trying to organize a bunch of id tags, I would like to be able to set up a single JavaScript variable which holds all manner of interesting information. One place I would like to use it, is to set the value of an id field in an HTML tag
<script>
var messageID = { idText: "message1", other: "qwerty"};
</script>
<div id="message0">Text Zero</div>
<div id="JavaScript.messageID.idText">Text One</div> <!-- abject failure -->
So basically I want the messageID.idText value to be the id value: id="message1". Obviously the example fails in the second div line. Is there a way to do this?
Edit:
Ok, I want to be able to use the value of messageID.idText elsewhere in the system, such as
var elementTag = document.getElementById(messageID.idText);
I use the id in many places, and the more there are, the better a chance of mis-typing something. This is not a small project :-)

So I am going with:
<?php
$msgOneId = "message1";
?>
<script>
var messageID = { idText: "<?=$msgOneId?>", other: "qwerty"};
</script>
<div id="message0">Text Zero</div>
<div id="<?=$msgOneId?>">Text One</div>
and then
var elementTag = document.getElementById(messageID.idText);
works

How do I get justifiedGallery plugin to work with multiple galleries?

I am using this wonderful jquery plugin called justified gallery. Below is a simplified html syntax to use this plugin, followed by javascript syntax.
HTML
<div id="my-gallery">
<a href="path/to...............">
<img src="path/to/............1.jpg" />
</a>
<a href="path/to...............">
<img src="path/to/............2.jpg" />
</a>
.......
</div>
JAVASCRIPT
<script>jQuery("#my-gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});</script>
ISSUE - With the above code the plugin is working just fine BUT only for the first instance of the html syntax. Meaning, if I try <div id="my-gallery">......</div> twice or more on the same page, it only works on the first instance. Since there is going to be multiple galleries on a same page I need this to loop.
I can handle php well but yet to start learning javascript so unable to hack the javascript. If it was only php I would have generated different ids for each gallery with something like the code below.
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
$i = 0;
foreach($arr as $a){
echo '<div id="my-gallery-'.$i.'">'.$a. '</div><br>';
$i++;
}
The code above would have resulted to this in the view-source.
<div id="my-gallery-0">first_gallery</div><br>
<div id="my-gallery-1">second_gallery</div><br>
<div id="my-gallery-2">third_gallery</div><br>
So the question is, is my logic correct to solve this, if yes then (since my javascript is nill) how do I solve this in context of my javascript. Any response if appreciated. TIA.

You are not allowed to have multiple element with identical id's... so having two or more <div id="my-gallery"> is invalid HTML.
Instead give each one a class, and use that class name as the selector in your jQuery.
<div id="my-gallery1" class="my-gallery-class">
...
</div>
<div id="my-gallery2" class="my-gallery-class">
...
</div>
$(function(){
$(".my-gallery-class").each(function(){
$(this).justifiedGallery({
rowHeight : 120,
margins : 0
});
});
});

Use a class instead. An ID must be unique. Having multiple identical IDs is invalid HTML. Output as follows:
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
foreach($arr as $a){
echo '<div class="my-gallery">'.$a. '</div><br>';
}
And use Javascript then like this. (Note that a document ready event might be required!)
<script>
$(document).ready(function() {
$(".my-gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});
</script>
Using br in HTML for this purpose is discouraged. If your elements are block elements and are not floated or absolutely positioned, you won't need br. If you want some space between them you can set a margin is CSS (and remove br):
.my-gallery {margin: 24px auto;}
If you want to keep the unique ID on the gallery items (I don't know why, it seems pointless and needless markup to me, but anyway) you can do it like this:
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
$i = 0;
foreach($arr as $a){
echo '<div class="my-gallery" id="my-gallery-'.$i.'">'.$a. '</div><br>';
$i++;
}

As others have suggested you can give each gallery a common class and use that in your JavaScript
eg:
<div class="gallery" id="my-gallery-0">first_gallery</div><br>
<div class="gallery" id="my-gallery-1">second_gallery</div><br>
<div class="gallery" id="my-gallery-2">third_gallery</div><br>
<script>
jQuery(".gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});
</script>

Jquery function to change id name continues to run on other pages even thouigh i don't want it to

This behavior is happening on a intranet website structured for computer based training. I am using a function to change "id" name of a div using jquery on the fly on a single page.
$('#frameTextBg').attr('id','frameTextBg-horz');
It works fine. The problem is that when I navigate to another page, this functions continues to run and any page with div name #frameTextBg is being renamed to frameTextBg-horz.
I navigate to other pages using jquery to load pages inside a div. Note "var NextPage" is declared in each page by the authoring programs html export:
function NextPage() {
$('#content').load(nextPage)
};
How can I stop this function from running on other pages?
Thanks in advance.
Mark
Here are portions of the html markup relevant to the "outside" container that will load each page inside a div named #content.
...
<body class="mainBody" onLoad="resizeCBT();">
<div id="container">
<div id='content'></div>
<div id="footer">
<p id="footerP">LessonName</p>
<div id="footerPG">00 of 00</div>
<div id="footerNav"></div>
<div id="footerID" style="display:block" ></div>
<div id="control" name="control"><div>
</div>
<script type="text/javascript">
$('#content').load("Menu-0.htm");
$( "#control" ).load( "interface/control.htm #select1" );
document.getElementById('control').style.display="none";
</script>
</body>
...
Next are portions of the markup for a single page that runs the function to rename the id:
...
<script type="text/javascript">
var frame_id = 95675
var graphic_1 = "20.png"
var graphic_2 = ""
var nextPage = "a.htm"
var prevPage = "c.htm"
var thisPage = "b.htm"
var menuTitle = ""
var frameTitle = "title"
var sequence = 20
var totalFrames = 26
var manifestName = "No_Flash"
var instructText = ""
var audioFilename = ""
function runAfterPgLoad() {
$('#frameTextBg').attr('id','frameTextBg-off');
}
</script>
</head>
<body>
<div id="header">
<div id="header1"><h1 id="header1t">headerOne</h1></div>
<div id="header2"><h1 id="header2t">HeaderTwo</h1></div>
<div id="header3"></div>
</div>
<div id="GRAPHIC"><img src="20.png"></div>
<div id="TEXT" class="text">Text here.</div>
<div id="frameTextBg"></div>
<script type="text/javascript">
function NextPage() {
$('#content').load(nextPage)
};
function PrevPage() {
$('#content').load(prevPage)
};
document.getElementById('footerID').innerHTML = frame_id;
document.getElementById('footerPG').innerHTML = sequence + " of " + totalFrames;
if (typeof runAfterPgLoad == 'function') {
runAfterPgLoad();
}
</script>
</body>
</html>
Other pages DO NOT have the function:
function runAfterPgLoad() {
$('#frameTextBg').attr('id','frameTextBg-off');
}
Note that some markup has been omitted because this material cannot be disclosed. Sorry if I accidentally cut off any relevant markup.

You're using ajax to replace PARTS of your page. since you're not reloading the entire page, or using a normal "click to go to next page" system, that function will keep working until you tell it to stop, e.g.
var stop_it_already = false;
if (!stop_it_already) {
$('#frameTextBg').attr('id','frameTextBg-horz');
}

This isn't a definitive answer, because I'm still unclear about how exactly NextPage gets called.
You should never have different HTML elements with the same id. Since it's not something you're meant to do, I'm not even sure the specification for HTML says what should happen, so your page may behave differently on different browsers. Does $('#frameTextBg') represent all frameTextBg elements? Or does the browser only let it be one element and, if so, which one?
I used to work on a project which involved embedding lots of not-quite-identical copies of a website in another website. We had to change all the id attributes to CSS classes. Then, assuming all the frameTextBg elements are in different sections of the website, we could write $('.section-1 .frameTextBg'), $('.section-2 .frameTextBg'), etc.
Note "var NextPage" is declared in each page by the authoring programs html export
My client-side javascript is a little rusty, but I think that any declaration not inside a function definition just goes in the global scope anyway. This could cause problems with the latest copy of NextPage running instead of an earlier one. (But I can't tell because I don't see where NextPage is called from.)
You say you're reloading part of the page. Do you really need to reload the part with the <script> element?

Simple JS Refresh Div Not Working

I've found a simple JS script that should refresh a div every 1000 milliseconds however it is not working, any help is appreciated.
Here's the script:
window.setInterval("refreshDiv()", 1000);
function refreshDiv(){
document.getElementById("timer").innerHTML;
}
Here's the div:
<div id="timer">
<div class="progress-bar" style="width:
<?php
echo (Pot::getTime(1) * 100) / 120;
?>%">
</div>
</div>
The script is within a file called script.js and is loaded at the bottom of the page like so:
<script src="/styles/js/script.js"></script>
Thank you in advance for any responses :-)

From the code you've provided it looks like you're not doing anything with the div when refreshDiv is called. If you are trying to change the text with innerHTML it needs to be something like document.getElementById("timer").innerHTML = 'something'
This javascript should work:
window.setInterval(refreshDiv, 1000);
function refreshDiv(){
document.getElementById("timer").innerHTML = 'example';
}
Note: using no quotes with just the function name in setInterval like refreshDiv instead of "refreshDiv()" is the recommended way.

Remove the quotes:
window.setInterval(refreshDiv, 1000);
setInterval expects to get a function, not a string.

Jquery selector data retrival in variable, in another different page

How can we use Jquery to read certain page content in a variable on a different page? If for example we want to read div.tag1 from a page into another page but in a variable( ie i dont want to load it into the page but manipulate it so store it in variable)
Eg: file1.html have(say)
<div class="tag1"> Hello world </div>
<div class="tag2"> Hello Boys </div>
<div class="tag3"> Hello Girls </div>
Now I want page2 to have Jquery script that will store the content of div.tag1 in a variable.
This is what I need in file2.html :
// without loading it to any page ie without using load.
<script type="text/javascript">
var filename = "file1.html";
var myData = // Code to retrieve div.tag1 from file1.html( ie filename)
document.write(myData); // for the time being.. later it will go in Database.
Any help will be appreciated.

The simplest solution is to use load on a newly created element (a hidden element will also work):
var content = $("<div />").load("/page.html div.tag1",
function(){ // callback
alert(content.text());
});