When ever you visit a news site, as and when you scroll down after two three scrolls, suddenly a small popup show displaying some latest news or sports news etc. When you scroll up back... it disappears.
When you scroll down about 3/4 of the page, suddenly a popup shows some news flash with some images.
How to accomplish this type of popup.
Note that this has close "X" icon and when you move mouse over it, the "X" color changes to amber or something.
My Findings: I found by source that it may have been triggerd by javascript or jquery such that when it reaches x and y position then show this popup. Also Like what we have in javascript floating div, similar kind of div may have been used in the html file.
But I am wondering how even mouse over could function via javascript for "Div" in html with images?
Or is this an ajax modal popup triggered by javascript or something?
I need your help in finding this as I have the same kind of requirement where in when the user scrolls down half page, he should be able to view something as "5 Cases Will be escalated in 24 hours. Please review the case urgently"
I am okay with javascript or jquery or ajax. anything would do but if you cud explain to me
I appreciate your post almost near to my question.
You know, I tried this from afternoon and I found the solution. I had allready had the div markup.
Because I had allready found out that it may be possibly done by using jquery or javascript by checking the source of that page which I posted.
Now I started to breakdown the problem logically thinking how could that be possible. Answer poped out from my mind that " if user scrolls .... down.... then .... show..... or hide..." I followed on same grounds. I knocked javascript's door. It was bit lengthy..
So all I wanted to know if I could be able to show that when we scroll down the page. It was very tedious finding the scroll position which took lines and lines of code. So I thought Jquery will make my life easier. I browsed http://api.jquery.com/scrollTop/ which
gave me an idea on how to find the scoll position. All I did was something like this:
$(document).mousemove(function () {
var pos = $(window).scrollTop();//one line made life easy :)
if (pos > 700) {//This gives me the position in my document
Array[0].menu.style.visibility = 'hidden';
}
else
{ Array[0].menu.style.visibility = ''; }
});
So this made me to get what I wanted.
All you need is a pefectly ready html/modal/menu ready with CSS design somewhat like ready to get "Married to Browser" And little bit of pain chewing the teeths will help you this.
Array[0] is my moal/menu/div.
For the pos, you can set it to 500. For my code I have made "Hidden" if pos > 700. You have to do it the reverse way like:
$(document).mousemove(function () {
var pos = $(window).scrollTop();
if (pos > 700) {//This gives me the position in my document
Array[0].menu.style.visibility = '';
}
else
{ Array[0].menu.style.visibility = 'hidden'; }
});
Thanks all for viewing and posting tips
God Bless us all! Happing coding..... If any one comes up with some more superb stuff for similar post will be appreciated.
shreenidhi
Member
122 Points
76 Posts
News Flash - appears when you scroll CNN.Com/Fox News or Any other News Website
Dec 18, 2012 05:47 AM|LINK
Hello Folks,
When ever you visit a news site, as and when you scroll down after two three scrolls, suddenly a small popup show displaying some latest news or sports news etc. When you scroll up back... it disappears.
Visit this link
http://www.slate.com/blogs/the_slatest/2012/12/16/dianne_feinstein_democrats_push_assault_weapons_ban_after_school_shooting.html
When you scroll down about 3/4 of the page, suddenly a popup shows some news flash with some images.
How to accomplish this type of popup.
Note that this has close "X" icon and when you move mouse over it, the "X" color changes to amber or something.
My Findings: I found by source that it may have been triggerd by javascript or jquery such that when it reaches x and y position then show this popup. Also Like what we have in javascript floating div, similar kind of div may have been used in the html file. But I am wondering how even mouse over could function via javascript for "Div" in html with images?
Or is this an ajax modal popup triggered by javascript or something?
I need your help in finding this as I have the same kind of requirement where in when the user scrolls down half page, he should be able to view something as "5 Cases Will be escalated in 24 hours. Please review the case urgently"
I am okay with javascript or jquery or ajax. anything would do but if you cud explain to me
Thanks!
Shree
roopeshreddy
All-Star
20155 Points
3328 Posts
Re: News Flash - appears when you scroll CNN.Com/Fox News or Any other News Website
Dec 18, 2012 06:19 AM|LINK
Hi,
We have onmouseover event!
<div onmouseover="MyFunction();"> </div> <script type="text/javascript"> function MyFunction() { alert('DIV!'); } </script>Regarding display of popup, it up to you! You can display AjaxModalPopupExtender control, or plain Modal pop up based on your need!
Hope it helps u...
Roopesh Reddy C
Roopesh's Space
urenjoy
Star
12347 Points
1857 Posts
Re: News Flash - appears when you scroll CNN.Com/Fox News or Any other News Website
Dec 18, 2012 07:38 AM|LINK
Check following links to grab idea to display div on scroll down:
http://stackoverflow.com/questions/5609255/javascript-jquery-perform-function-when-user-scrolls-near-bottom-of-page
http://jsfiddle.net/dhirajbodicherla/KdTct/
shreenidhi
Member
122 Points
76 Posts
Re: News Flash - appears when you scroll CNN.Com/Fox News or Any other News Website
Dec 18, 2012 08:39 AM|LINK
Hey urenjoy,
I appreciate your post almost near to my question.
You know, I tried this from afternoon and I found the solution. I had allready had the div markup.
Because I had allready found out that it may be possibly done by using jquery or javascript by checking the source of that page which I posted.
Now I started to breakdown the problem logically thinking how could that be possible. Answer poped out from my mind that " if user scrolls .... down.... then .... show..... or hide..." I followed on same grounds. I knocked javascript's door. It was bit lengthy..
So all I wanted to know if I could be able to show that when we scroll down the page. It was very tedious finding the scroll position which took lines and lines of code. So I thought Jquery will make my life easier. I browsed http://api.jquery.com/scrollTop/ which gave me an idea on how to find the scoll position. All I did was something like this:
$(document).mousemove(function () { var pos = $(window).scrollTop();//one line made life easy :) if (pos > 700) {//This gives me the position in my document Array[0].menu.style.visibility = 'hidden'; } else { Array[0].menu.style.visibility = ''; } });So this made me to get what I wanted.
All you need is a pefectly ready html/modal/menu ready with CSS design somewhat like ready to get "Married to Browser"
And little bit of pain chewing the teeths will help you this.
Array[0] is my moal/menu/div.
For the pos, you can set it to 500. For my code I have made "Hidden" if pos > 700. You have to do it the reverse way like:
$(document).mousemove(function () { var pos = $(window).scrollTop(); if (pos > 700) {//This gives me the position in my document Array[0].menu.style.visibility = ''; } else { Array[0].menu.style.visibility = 'hidden'; } });Thanks all for viewing and posting tips
God Bless us all! Happing coding..... If any one comes up with some more superb stuff for similar post will be appreciated.
shreenidhi
Member
122 Points
76 Posts
Re: News Flash - appears when you scroll CNN.Com/Fox News or Any other News Website
Dec 18, 2012 08:41 AM|LINK
Hi roopeshreddy,
Thanks for your post. I appreciate your help.
I found the answer as well, you can use this to suggest those who need.
Thanks! :)