Refresh div without removing text selection - javascript

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 :)

Related

Anchor link opens Lightbox in another page

I'm having a bit of an issue figuring out a very simple interaction.
Some Context:
I'm working on a website that showcases some products in a grid and when clicked, a Lightbox pops up with the information of the product..pretty simple! Roughly my markup/script:
<img id="1234" src=".../blah.jpg"></img>
$( img ).click(function() {
// open (this) lightbox
// etc. etc.
});
Now I'm trying to implement the search functionality, which exists obviously in another page. The search reutrn a list of products each one with a path such as:
Product 1234
So if I click the item, it will take me to the correct page where the item exist and since I'm including the anchor link, it will kind of place it visible to the user. This works fine.
My question is, how can I make the Lightbox open automatically after being directed from the search to the actual category page where the product exists?
This seems to be super simple, but for some reason I can't manage to figure it out! Any help would be really appreciated!
Thanks!
So when the dom is ready on the category page, you wan to check the url to see if an anchor exists. This will mean that they have arrived via the search results page.
reference:
How can you check for a #hash in a URL using JavaScript?.
Something like this:
if(window.location.hash) {
var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
alert (hash);
// hash found
// open (this) lightbox
}
If it exists, get the product id from the hashtag and trigger the lightbox functionality

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'));
});
}

Dynamic Confirmation Message on a confirm.html

I am trying to create a Javascript function to display a dynamic confirmation message, that will appear on a confirm.html page. It needs to be in an external Javascript file so that it can be used on a variety of pages. I've tried a variety of things but I just cant quite get it to work correctly. I'm trying to do it with only Javascript.
This is what I have currently, after doing some research
This is button I'm using to call the function
<input type="button" value="Remove" onclick="dynamicMessage('This product has been deleted')">
and the current function I'm using is
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_self");
test.document.write("test");
test.document.close();
}
Obviously, the dynamic content isn't added in yet, but if my thinking is correct, it should just be adding the argument somewhere in the long string of html I need to add to create the page. The "test is just do see what happens when calling the function.
What I want it to do is, write the "test" to the new window of confirm.html, but instead it overwrites the current window. But if I only call window.open, it opens to the correct window. It is the document.write part that is throwing me off.
I'm not sure if I'm far off base on my thinking, or if its just a simple mistake I'm missing after hours of looking at this code. Any Ideas?
I think I need to clarify what I am trying to do. I am trying to click a button, in this case a remove button, then open up the page confirm.html, edit the content in confirm.html with the argument, and have the current page now be confirm.html. What currently happens is one of two things either the current document is edited if the "_self" tag is placed, or the html page is open and thus an about_blank url.
Hope i understood your question | DEMO
Since you are using document.write method it will overwrite contents of your html page
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_blank");
test.document.write(argument);
setTimeout(function(){test.close()},2000); // after 2 sec it will close
}

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
}

How to find/detect any textarea in page in javascript

(document.getElementById('textarea').length > 0) doesn't work. Does anyone know anything else other than this?
Will
Here is the scenario from my previous question which was unanswered. I have Rich text Editor(Openwysiwyg) which is loaded into textarea when I go to that particular page where textarea is placed. The function uses textarea id to identify textarea to replace it with Rich Text Editor(RTE). Now the script to call this function is in header part of the page. I select a drop-down option for sending email, so my textarea for email shows up. With this script added for RTE, my textarea for email is replaced by RTE and I can send formatted emails. So this works perfectly fine in Firefox. With IE7, RTE shows up even before I select drop-down option for email and this makes whole page messed up.When I select drop-down option for email, I just see normal text area and RTE still sitting at top of page.
document.getElementsByTagName('textarea').length > 0
You can use (note the plural form!)
var e = document.getElementsByTagName("textarea");
You can use jQuery as well:
$("textarea").each( function() { /* ... */ } );
EDIT:
I faced a similar problem once. I was using fckedit, and when I tried reading the value of my textedit (document.getElementById('blabla').value) I was getting null, even tough the rich text edit was ddefinetly showing something on screen.
It turns out that the fckedit API opens a new element on top of the textearea, and only when you navigate from the page is syncs it's internal data (which is on an iframe, if I am not mistaking) into the original textarea.
The moral of the story: if you are using some richtext API - use it's API to query the status of your "textarea". Hope this helps you, as I don't know the library you are using.
PS: I actually used $("blabla").val() ... which is also JavaScript... for some reason people think that jQuery is not javascript. Why is that?
Pure JavaScript (You can use this code)
textarea is HTML element tag
JavaScript :
if(document.getElementsByTagName('textarea').length > 0) {
}
HTML CODE:
<div class="flavor">
<div class="value">
<textarea name="name" rows="8" cols="80"></textarea>
</div>
</div>
<script type="text/javascript">
var flavorbox = document.getElementsByClassName('flavor')[0]
.getElementsByClassName('value')[0]
.getElementsByTagName('textarea').length;
alert(flavorbox);
</script>
Since openWYSIWYG generates a iframe on the fly, its not so simple to get/set its content.
I am currently working on changing these settings in the source. will post here a link as soon as i get the changes.

Categories

Resources