Develop Reference

I need to change a javascript code

I made an onclick popup redmore button for my sidebar text widget in wordpress just copied and pasted this code I found here. I did some little changes and everything worked fine.
The problem occurred when I had to make more onclick popups like that one for the rest of the sidebar widgets, exactly the same popup with same values but with different img and content text.
The problem is both "redmore" buttons in the first widget and in the second one link to the same thing - so it will open the same one no matter which redmore button you click -
this is the website check out the first two items in the right sidebar.
Since I don't know much about Javascript, I'm asking you if you can help me changing the javascript tag link in the code in order to link to another different popup and not the same one - and let me understand how to change it since I have to make a few popups.

You should change the Id attribute of the Contents for eg
<div id="light2" class="white_content">
<div id="fade2" class="black_overlay">
for the second pop up and change the javascript of the second read more text to
here
Same should be applied to all other pop ups.
Here i have changed the fiddle

You need to change the id for every popup Like
getElementById('fade')
getElementById('light')
[the first]
getElementById('fadesec')
getElementById('lightsec')
[the second]
And so on.. same thing on html content, don't just copy, change ids
Example two:
<p>This is the main content. To display a lightbox click here</p>
<div id="lightsec" class="white_content">This is the lightbox content. Close</div>
<div id="fadesec" class="black_overlay"></div>

Refresh div without removing text selection

I've built a simple chat that reloads every 3 seconds.
The actual reloading of the chat is done by this script (copied from Google, I've only done PHP, CSS and html before):
$(document).ready(function() {
$("#chat").load("system/chat.oclog"); // Loads chat upon page load
var refreshId = setInterval(function() {
$("#chat").load("system/chat.oclog");
}, 3000);
$.ajaxSetup({ cache: false });
});
Now to the problem. If you were to select any text inside of the chat-div, the selection goes away when the chat reloads since the div is being refreshed. This makes copying text a real pain.
Any suggestions/solutions to this problem is greatly appreciated. Me myself have been thinking of maybe making the script only reload the chat if the filesize of the chatlog has changed, but I'm not sure how to to this and Google hasn't given me a solution either.
/Erik

Solution :-
First Create 2 Div's , 1 For loading content and it will hidden by css ( display : none ), and then a another one that will be visible to user,
<div id="hidden_content" style="display : none;"> </div>
<div id="chat"> </div>
And your content will be load in hidden_content, and then add a another function that will called everytime when content loaded in in hidden element, then you can check if the string length of hidden_content's div is equal to chat div's content, and if it is equal so no need to copy this data in chat div , and if not then you can will use substr to find out what new more chars are added in hidden_content, and then once you find out those more chars that was not in chat before, "append" them the chat content !
So by this only new chars will append to that chat, so you can select and it will not reload again :), This solution will work if the loaded content increase like this :-
previous content + new content
Mean on server if There was one message on file and then a another added so this another one must be apped to that old one,
Well it's not a good solution at all, your browser will always dowload full data, and that is not good solution ! , Sorry for weak english :)

changing id within javascript with onClick var?

I managed to get some js to work to my surprise, now I want to make it a little more complex which is way out of my expertise.
I have a button when clicked will reload a iframe that is on my page. I have multiple iframes all but 1 are hidden. Then I use jquery to display a different iframe and hidden the previous depending on the nav button clicked. e.g. "1-btn" (nav btn) tied to "1-win" (iframe), "2-btn" (nav btn) tied to "2-win" (iframe) etc. So when you click "2-btn", "1-win" iframe hides and "2-win" iframe is displayed. Now I want to change my code so this ties into my reload javasrcipt. Currently, my js only reloads 1 iframe via the iframe id. I want to change this id every time to a different iframe. This will allow my Reload btn to only reload the current iframe displayed and not any of the other that are hidden.
Here is my Reload js
function Reload () {
var f = document.getElementById('1-win');
f.src = f.src;
}
As you can see this reload script only works for iframe "1-win". When i click "2-btn" nav to display "2-win" iframe (and hides "1-win") the reload button still only works for "1-win". Therefore, I want it to also change. For e.g. when I click "2-btn" (nav) to display "2-win" iframe I want to change the Reload id to "2-win" also.
I was thinking of using onClick within my nav buttons which passed through the id of the iframe which that nav btn is tied to. However, I have no idea how to do this.
For full code see:
https://github.com/tmacka88/Service-Manager
Sorry if this doesn't make any sense, I cant think of an easier way to explain it.
Thanks

EDIT
This below answer may or may not still apply now that the problem has been better defined.
One approach you could try is having a hidden field on the page which contains a semi-colon separated list of the Id's of the iframes. E.g.
<input type="hidden" name="iframeids" value="1;2;3;4;5">
On the click event of your button, call some JavaScript which gets the value of the hidden field, takes the first token before the semicolon, and then reorganise the string. An example:
// Next value is 1
// Use 1 in your JS
// Put 1 to the end, next is now 2
<input type="hidden" name="iframeids" value="2;3;4;5;1">
You would contain the logic of re-arranging etc. in the JS function.

Now that the problem is better defined, we can work out a proper solution.
Here are some design considerations:
Ideally you do not want to manually add a new button for every iframe that you put on the page. Main reason being code maintenance. If you were to add a new iframe, or remove one, your code would not function correctly. Also the amount of mark-up required will be unnecessarily high
jQuery will make your life easier, although it's not required, it will cut out a lot of code. I can't stress enough the importance of knowing JavaScript basics first, but this is your responsibility to learn
For point 1, what we would like is a generic solution so that if you add more iframes, the buttons are added automatically. JavaScript is the way to do this (I'm assuming this is just HTML, not ASP.net or php or some other server side
Point 2 - jQuery will help with point 1.
Now we have this understanding, let's look at an outline of what we need to do:
In JavaScript, loop through the iframe tags on the page
For each iframe, generate a button using jquery, using the values like src and id in the iframe as attributes on the button
Add some click-event code to the button do define what it needs to do when clicked
Again using jQuery, add the newly created buttons to the DOM

This did the trick:
function Reload()
{
$("iframe").each(function()
{
if($(this).is(':visible'))
$(this).attr('src', $(this).attr('src'));
});
}

Javascript - getting all links in specific DIV elements in a class on a HTML page and creating an array

I am trying to create an automation to perform some action to a HTML page. This page contains a complex table wit a lot of divs inside divs. Every line of this page is clickable and will open another page. I have already created the automation that will perform tasks on this page that opens, but I need to automate clicking on every line on this first table first.
Analyzing the first column of this page, I have this Xpath for the first 3 cells of the first colum:
/HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/TABLE[1]/TBODY[1]/TR[3]/TD[1]/TABLE[1]/TBODY[1]/TR[2]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/DIV[1]/DIV[2]/DIV[2]/SPAN[1]/UL[1]/LI[3]/DIV[1]/DIV[2]
/HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/TABLE[1]/TBODY[1]/TR[3]/TD[1]/TABLE[1]/TBODY[1]/TR[2]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/DIV[1]/DIV[2]/DIV[2]/SPAN[1]/UL[1]/LI[4]/DIV[1]/DIV[2]
/HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/TABLE[1]/TBODY[1]/TR[3]/TD[1]/TABLE[1]/TBODY[1]/TR[2]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/DIV[1]/DIV[2]/DIV[2]/SPAN[1]/UL[1]/LI[5]/DIV[1]/DIV[2]
and this for the last cell of the first column:
/HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/TABLE[1]/TBODY[1]/TR[3]/TD[1]/TABLE[1]/TBODY[1]/TR[2]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/DIV[1]/DIV[2]/DIV[2]/SPAN[1]/UL[1]/LI[102]/DIV[1]/DIV[2]
You can see that there's just one element varying from 3 to 102.
All cells in the first column have this HTML
<div style="float:left;" class="ajaxListColumn ajaxListColumnInternal ajaxListColumn_2 ajaxListSearchable ajaxListRowDivActionable ajaxListRowDivColumnActionItem default-to-first-column">
<span class="left">Item 1</span>
</div>
what varies from cell to cell on the first column is this Item 1, 2, 3, etc...
What I need is, to create an array of elements, so I can click them with Javascript and then perform the automation I already have on each page that will open for each click on a line of this table. How do I get this array? Thanks.
I am not sure what other informations you guys need to answer this. Please ask me and I will post here.

If you just want an XPath which will select all those rows, just take your second example and remove the "[102]".
Here: ↓
/HTML[1]/BODY[1]...blah blah.../DIV[2]/SPAN[1]/UL[1]/LI/DIV[1]/DIV[2]
This will select all those LI elements.
I will update this answer if I've got the wrong end of the stick.

How to Hide the Div Before Page Load?

I have an ASP page which consist of a table that is generated with the ASP script. I am now populating the table values from a RSS feed by parsing items in it.
The RSS feeds consist of some Job Vacancies data. The items are: date, JobID, Title, Location, Category, Apply Link.
I have one requirement to make a mouseover to the Job Title. When mouse over to the Job Title, a small popup will display and shows Job Description from the RSS feed. The table is showing all the entries and mouse over is also working perfectly after page fully loads.
The problem is during the page load (before the page fully loads) if a user mouse over the job title in the first row, then the mouse over will shows the first entry, but it affects the last entries. The last entry Job Titles will not displays the description when mouse over. "Firefox error console displays the variable description undefined".
How can I rectify the problem??

One way is to not set the mouse over before the pages loads fully. for that use the body.onload event
rough eg:
<body onload="document.getElementById('jt1').onmouseover = showJobDesc;">
<a id="jt1"> JobTitle </a>
</body>
The other way is to set a flag in the body.onload evetn and modify the mouseover code to execute only if that flag is true.
rough eg:
<body onload="var myPageLoaded = true;">
<a onmouseover="if(myPageLoaded==true) showJobDesc();"> JobTitle </a>
</body>

The issue is solved perfectly by setting the below condition
to the mouseover function content.Thanks for the suggestions.
if(document.readyState=='complete')
{
//code
}