Auto scroll a webpage with rss-feed, item by item - javascript

I'm making a wallboard (monitor with a newsfeed on it). I'm new to javascript but managed to find a few sources that helped me to put an RSS-feed on a PHP-page and format it with CSS.
So far so good!
To turn this page into a wallboard, I'd like to show one feed-item for a few seconds and then have to page automatically scroll to the next item. Each feed-item is in a <div class="post">.
Could someone please help me with some sample autoscroll code?
I've tried to scroll continuously through the page, but that is not the effect that I'm looking for.
This is the code of a <div> that shows a post:
<div class="post">
<div class="post-head">
<h2><a class="feed_title" href="<?php echo $link; ?>"><?php echo $title; ?></a></h2>
<span><?php echo $pubDate; ?></span>
</div>
<div class="post-content">
<?php echo implode(' ', array_slice(explode(' ', $description), 0, 20)) . "..."; ?> Read more
</div>
</div>
To scroll, I currently use a script from javascriptkit.com:
<script language="JavaScript1.2">
var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize(){
startit()
}
function scrollwindow(){
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+1
else
currentpos=window.pageYOffset+1
window.scroll(0,currentpos)
}
else{
currentpos=0
window.scroll(0,currentpos)
}
}
function startit(){
setInterval("scrollwindow()",100)
}
window.onload=initialize
</script>
The page that I have now is available here:
https://app-storage.org/mrm/rsstest.php
The effect I'm looking for is:
1. Show the first news item
2. wait a few seconds
3. smoothly scroll to the second news item
4. at the end of the page, return to the first item
Any help is greatly appreciated!!!

Related

Issue with window.location.href and page reload

I've got some code to redirect to a certain page if a certain condition is true
if(value.match(/^<?php echo $javascriptArray; ?>$/))
{
window.location.href = '/postcode-success/?pc='+value;
}
On the page that the user is redirected to I've got a php if statement that will show a topbanner:
<?php if ($_SESSION['pc_valid'] !=null) :?>
<div class="row" style="margin:0px;">
<div class="success-container" id="success-top">
<p>Success! <?php echo $_SESSION['pc']; ?> </p>
</div>
</div>
<?php endif?>
Now this all works but the problem is that you need to refresh the page in order for the pc_valid if statement to work and the banner to show.
I'm not sure why this is or how to fix it?
I guess I need to somehow reload the page on redirect?
re-write with AJAX type solution?
Here's a jQuery option: .load()
$('#success-top').load(document.URL + ' #newBanner');
if(value.match(/^<?php echo $javascriptArray; ?>$/)) {
$('#success-top').load(document.URL + ' #newBanner');
}

How do I trigger this hover function each time a new image has focus?

How can I hide all the images in a recordset except the image with the mouse hover on?
Images are displayed from the database and I am trying to manipulate how the images respond when a user hovers on any particular image.
Based on what I have read here on stackoverflow I came up with the following that actually works but with one limitation
On page load it works fine but once you start moving from image to image nothing happens.
I want only the active or image with hover to show while hiding the rest.
$(document).ready(function() {
$('.teamDisplay').hover(function(){
var infoFont = $(".imageDiv")
var $imgLink = $(this).children(infoFont).attr("data-imgPath");
$('.memberPicBg').css('background-image', 'url(' + $imgLink + ')');
$('.teamDisplay').addClass('imageDivOff');
$(this).addClass('imageDivOn');
}, function(){
$('.memberPicBg').css('background-image', 'url(' + $imgLink + ')');
$('.teamDisplay').addClass('imageDivOn');
$(this).addClass('imageDivOff');
});
});
I am also using css to show or hide the images but the hover function appears to work just once on page load.
How do I trigger this hover function each time a new image has focus?
This is the website with the feature I hope to replicate
UPDATE
The html code
`<div class="memberPicBg">
<?php do { ?>
<span class="teamDisplay">
<?php
// Show If File Exists (region1)
if (tNG_fileExists("../images/team/", "{members.tmemberphoto}")) {
?>
<span class="imageDiv" data-imgPath="../images/team/<?php echo $row_members['tmemberphoto']; ?>">
<span class="teamMemberNameH"><?php echo $row_members['tmember']; ?></span>
<span class="teamMemberTitleH"><?php echo $row_members['tmemberposition']; ?></span><br /><br />
<img src="../images/team/<?php echo $row_members['tmemberphoto']; ?>" alt="<?php echo my_meta_description($row_members['tmember'],6); ?>" border="0" /> </span>
<?php
// else File Exists (region1)
} else { ?>
<span class="teamMemberNameH"><?php echo $row_members['tmember']; ?></span>
<span class="teamMemberTitleH"><?php echo $row_members['tmemberposition']; ?></span>
<?php }
// EndIf File Exists (region1)
?>
</span>
<?php } while ($row_members = mysql_fetch_assoc($members)); ?>
</div>`
NB: apologising if I am not clear enough.

Why is jQuery(document).ready not working? / How do I add CSS to an element in jQuery?

I'm new to jQuery and I'm having problem with a piece of code.
I'm trying to add Image Power Zoomer v1.2 to my website, which works on the main image, but not the rollover image! The rollover image changes, but power zoomer only shows the loading image.
This is an example URL: Example1
This is my code:
<script type="text/javascript">
var bufferImage = new Array();
function Buffer(filename) {
var i = bufferImage.length;
bufferImage[i] = new Image();
bufferImage[i].src = filename;
}
function showImage(filename) {
document.images[Image_Name].src = filename;
}
Image_Name = "image_pal";
Buffer("thumbnail.php?pic=<? echo $image_pal['media_url'];? >&w=600&sq=Y");
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom({
powerrange: [2,8],
largeimage: null,
magnifiersize: [200,200] //<--no comma following last option!
})
})
</script>
<? $sql_image_pal=$db->query("SELECT media_url FROM " . DB_PREFIX . "auction_media WHERE auction_id='" . $item_details['auction_id']."'AND media_type=1 ORDER BY media_id ASC ");
$image_pal=$db->fetch_array($sql_image_pal);
$sql_image=$db->query("SELECT media_url FROM " . DB_PREFIX . "auction_media WHERE auction_id='" . $item_details['auction_id']."'AND media_type=1 ORDER BY media_id ASC ");?>
<div align="center" class="image_pal">
<? if (empty($image_pal['media_url'])) {?>
<img src="themes/<?=$setts['default_theme'];?>/img/system/noimg.gif" name="image_pal" width="600" />
<? } else {?>
<img id="myimage" src="thumbnail.php?pic=<?=$image_pal['media_url'];?>&w=600&sq=N" border="0" alt="<?=$item_details['name'];?>" name="image_pal" />
<? }?>
</div>
<div class="list_carousel_img" align="center">
<ul id="small_img">
<? while($image=mysql_fetch_array($sql_image)){?>
<? $ad_img=$image['media_url'];?>
<li class="small_img">
<a href="thumbnail.php?pic=<? echo $ad_img;?>" onmouseover="showImage('thumbnail.php?pic=<?=$image['media_url'];?>&w=600&sq=Y')"class="lightbox" rel="thumbnail_images" ><img src="thumbnail.php?pic=<?=$image['media_url'];?>&w=60&sq=Y" border="0" alt="<?=$item_details['name'];?>"/></a>
</li>
<? } ?>
</ul>
<div class="clearfix"></div>
<a id="prev_img" class="prev_img" href="#"></a>
<a id="next_img" class="next_img" href="#"></a>
<? if ($setts['lfb_enabled'] && $setts['lfb_auction']) { ?>
<div><img src="themes/<?=$setts['default_theme'];?>/img/pixel.gif" width="1" height="5"></div>
<? include("scripts/scroller/show_rep_details.php"); ?>
<? } ?>
I'm having trouble with jQuery Selectors. I have looked all over the web, spent many hours, but with no joy.
This is the site i got the Image Power Zoomer v1.2 from:
dynamicdrive.com
Question #2
Like i said im a newbie but i think my problems here jQuery selector these are some examples but i do not know what i need to add from my code
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$('img.showcase').addpowerzoom() //add zoom effect to images with CSS class "showcase"
$('#gallerydiv img').addpowerzoom() //add zoom effect to all images inside DIV with ID "gallerydiv"
})
</script>
What do i need to add here
$('????????????').addpowerzoom()
Thanks For all your help
jQuery(document).ready(function($){ //fire on DOM ready
==>
$(document).ready(function(){ //fire on DOM ready
Unless you changed your jQuery selector, this is the default
Because you asked another question in the answers (and even got an upvote?)
What do i need to add here
$('????????????').addpowerzoom()
This is my answer to that question:
$("img").each(function(){
$(this).addpowerzoom();
});
like in this demo: http://jsfiddle.net/u7w0ppq9/ with adding class instead of powerzoom (I do not have that library so, but it's basically the same)

How do I move a php call to another div and have it still work

I've looked around a bit, and found issues similar to mine, but not quite the same. I have a page template that is laid out in 4 columns in HTML. Inside column 4, I have a php function echoing a gallery of images.
<div id="homepage-layout">
<div id="homepage-column-1">
<div class="homepage-small"><?php echo get_homepage_img_small_1(); ?></div>
<div class="homepage-small"><?php echo get_homepage_img_small_2(); ?></div>
<div class="homepage-small"><?php echo get_homepage_img_small_3(); ?></div>
</div><!-- End Column 1 -->
<div id="homepage-column-2">
<div class="homepage-large-left"><?php putRevSlider("homepage"); ?></div>
</div><!-- End Column 2 -->
<div id="homepage-column-3">
<div class="homepage-med"><?php echo get_homepage_img_med_1(); ?></div>
<div class="homepage-med"><?php echo get_homepage_img_med_2(); ?></div>
</div>
<div id="homepage-column-4">
<div class="homepage-large-right"><?php putRevSlider("home_small"); ?></div>
</div><!-- End Column 4 -->
</div>
I'm using jQuery to change the layout of the site based on the width of the window.
var column3 = $("#homepage-column-3").contents();
var column4 = $("#homepage-column-4").contents();
var swapped = false;
$(window).on('resize', function() {
if( $(window).width() <= 700 && !swapped){
$("#homepage-column-3").html(column4);
$("#homepage-column-4").html(column3);
swapped = true;
} else if( $(window).width() > 700) {
$("#homepage-column-3").html(column3);
$("#homepage-column-4").html(column4);
swapped = false;
}
});
However, when the window size triggers the jQuery, the RevSlider from Column 4 freezes on the image it was displaying at the time, and the only way to get it running again is to refresh the page.
Any thoughts? Or, if this question has been answered already, please point me in the right direction.
Thanks!
jeroen had the right idea. I was able to take the 4 columns, and split them into 2 chunks. I was then able to make them both flex containers, and with a of media query, was able to make the columns swap places while keeping the RevSlider initialized.
Thanks to all for your help!

html vertical auto scroll with javascript

Im new with pure javascript (well i found its easy to use jquery, but its too bad i cant use jquery in this case :D).
I tried to follow this sample code, but its not working in my web.
This is a screen shoot and explanation of my web :
So, this page is separated into 2 different html file, one for header and its jquery tabs, the other one for the content below the tab.
My plan is to let the content below the jquery tabs scrollable, so the following code is from the html of my content (below the jquery tabs):
<body>
<script type="javascript">
function top() {
document.getElementById( 'top' ).scrollIntoView();
};
function bottom() {
document.getElementById( 'bottom' ).scrollIntoView();
window.setTimeout( function () { top(); }, 2000 );
};
bottom();
</script>
<div id="form_search">
<div id="top">top</div>
<?php echo form_open('backend/index') ?>
<p>
Kelas :
<?php echo form_dropdown('ddl_kelas1', $list_kelas, 'id="ddl_kelas1"');?> -
<?php echo form_dropdown('ddl_kelas2', $list_kelas, 'id="ddl_kelas2"');?>
</p>
<p>
Nama : <?php echo form_input('txt_nama');?>
Alamat : <?php echo form_input('txt_alamat');?>
Tanggal Lahir : <input type="text" id="datepicker" />
</p>
<?php echo form_submit('btn_search', 'Search');?>
<?php echo form_close(); ?>
</div>
<div>
<?php echo $table ?>
<?php echo $pagination ?>
<div id="bottom">bottom</div>
</div>
Please note that the top and bottom div is just for the page limit (i followed the sample code above).
I have tried another way like change the id/element used for limit, but its still not working.
Thank you for your help :D
Note : i use codeigniter framework for this project :D
It seems the solution to the user's question was to simply add overflow-y:scroll into the css for the div tag where the content was being placed. simple solution
jQuery
$("html, body").animate({ scrollTop: $('#bottom').offset().top }, 2000);
^ ^ ^
What to scroll ---------------------- to which element --------- duration
There seemed to be a lot of extra stuff in the bottom of your html screen in fiddle. I took that out and adjusted some of the javascript.
But taking the extra out did the trick already ...
// extra stuff starting at line 332
<script>
/* by: thinkingstiff.com
license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-555555-6']);
// more stuff
http://jsfiddle.net/djwave28/pA9QZ/3/

Categories

Resources