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
}
Related
I have an picture gallery and use fancybox v3. By entering the webseite, the first 20 pictures are loaded (generated with PHP) and fancybox is connected to those pictures.
The HTML part looks like this:
##loop##
<div class="item">
<a data-fancybox="group" href="<?= $i?>">
<img src="/thumbnail/<?= $i?>" />
</a>
</div>
##/loop##
Fancybox is initialized like that:
$().fancybox({
selector: '[data-fancybox="group"]',
loop: true,
});
..this works fine.
Now, if the user reaches the end of page, new content in JSON format is loaded an inserted into the website using DOM manipulation.
For this, I use an placeholder, which is an empty HTML template, hidden in the webseite. I clone that DOM element into the gallery and fill new elements with the data coming from the JSON request.
var px = $('#picturePlaceholder').clone().appendTo('.mygallery');
px.removeAttr('id');
px.children('a').attr('href', jsonValues.pictureURL);
px.children('a').children('img').attr('src', jsonValues.thumbnailURL);
px.children('a').attr('data-fancybox', "group" );
Unfortunately, this does not work. If I click on an new added picture, the fancybox opens and (in every case) the first picture from the original set is shown. Insight the fancybox I can "walk" trough all pictures from the initial set, but I'm unable to reach/see the new loaded pictures.
If I change the JS-Line
px.children('a').attr('data-fancybox', "group" ); to px.children('a').attr('data-fancybox', "group2" );, a new fancybox-instance has been applied to the new (JSON data) record.
But, the picture viewer is unable to slide from the first picture of the initial set to the last picture of the 2nd (JSON loaded) set.
If the users reaches the end of the webpage again, an new set of pictures is loaded again and inserted into the gallery, which seams to destroys the whole fancybox functionality. Fancybox no longer runs correctly. Even the existing pictures cannot be opened properly.
So how could I process JSON data, which is added to my gallery and inject the new data into the existing fancybox set?
To answer my own question in the case, that someone have the same problem:
My problem was based on a bug in fancybox, which is fixed in version 3.2.21 and later.
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
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 :)
I have two divs side by side, one say DIV 1, has a textarea, which when I type into it automatically updates the database on every keyup...
The second one DIV 2 has a Google Maps. So if I type a place into DIV 1, a live search is made and the final result is entered into some temporary table in my database (in the background). When I'm done typing, I want to click on some button in DIV 1, which then reloads DIV 2, with the Google Map. The Google Map code takes the values from the temporary values table and displays them.
For now I can do all of the above except that. What I want to do is not to reload the whole page: I just want to click on a button in DIV 1, and reload DIV 2 to show the new marked locations that I have searched for.
I just want to reload DIV 2 using a button in DIV 1.
The two DIVs are below:
<body onload="load()">
<div id="div1">
<input id="searchfield" autocomplete="off" />
<input type="button" id="send"/>
</div>
<div id="div2"></div>
</body>
Updating a database on "every key up" is a suggestion I would never give to anyone, especially to an amateur programmer.
Update some states on the page live without refresh? On submit? O.K! Great idea, then use Ajax.
Ok, you know that Google Maps (V3) uses 2500 calls-per-day and you want to leverage that calls maximally, you should recall your updated data via AJAX into your canvas element and redo the Markers positioning. Again AJAX.
I have Facebook iframe app where I am pulling content with JSON and representing it in a list with search criteria.
On item click new content shows on the same page (using ajax), and that page shows more info about item. I want to add a LIKE button for every clicked item.
But it must be a different URL so I can publish it on my FB wall. So when I check link from Like button on wall, it will redirect me on that special item.
Here are few issues:
1) How to define Like button for every item?
<div class="fb-like" data-href="LINK FOR LIKE BUTTON" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>
Here is LIKE button, I need to specify different data-href for every item.
2) I need to send some parameters to url. Let's say when clicking on item, I should send item id to URL. Right now I can send item id to my URL but it is doing just in my iframe -- not in facebook URL. How can I do this?
I think second problem would give an answer for my first problem.
Edit: I am doing this using jQuery.
edit2:
so, i am using jquery for my site, pulling content with JSON and representing it with html and jquery, i have, it is all the same page, but on click i hide some contents and show another, so my main content is a list of items, click on item i hide main content, and i show item info content
so, it is all one page, so it has the same URL (main content, item content,... all the same URL)
so for adding LIKE buttons for every item, i need to make a difference between those items, so i done this
'window.location.href=window.location.href + "#id=" + propertyid;'
so right now, every item has its own URL, which i done manually, so right now every item has own URL which i could use for LIKE button
but, when i alert this new window.location.href is seems all right, i get this new location with #id=12345 included, but when i try to send that location to LIKE button data-href it is always just the main location, without this new part includind item id #id=12345
Yes, you can create FB Like buttons for "items" shown on dynamically created screen content (eg Ajax popups).
Issues:
Individual item urls
FB demands a "social graph endpoint" for each item that can be liked. So you also need to support a url which returns only the "item." This is the url for the individual item. It is also the url that a FB viewer will click on if they want to find out more about the item.
Example: a page shows a list of articles. There is an individual Like button next to each article. When a person "Likes" article B, it is shown in their FB stream. When they click on "Article B" in the stream, it should go to a page that only shows article B.
Also, the url for just article B will be queried by Facebook to obtain the FB meta headers for the individual item (image, classification, etc).
Parsing the new dom for FB items Depending on which method you use for adding FB like buttons et al, you may need to tell FB to explicitly (re-)parse the new parts of the dom that you just added dynamic content to. (Your pop-up.)
Since you know the element that you added the popup to, there is no need to tell FB to reparse your entire dom. Tell them to parse starting at the beginning of your newly added/changed element:
Code I use:
if (event_data) { // event_data was received, show it
panel.setBody(event_data); // set the pop-up's body
if (!this.ie && typeof(FB) != "undefined" && FB.XFBML)
{FB.XFBML.parse(this.panel_el);} // Parse FaceBook markup
....
Docs from FB on this:
http://developers.facebook.com/docs/reference/plugins/like/
http://developers.facebook.com/docs/opengraph/
http://ogp.me/ # FB site about "Open Graph Protocol"
Place this in a for loop, and you should be fine.
var elements = $("#divId").html();
$("#divId").html(elements + "like button code");
$("#divId.fb-like").attr("data-href", "what you want to link to");
See .html() and .attr() specs.