I had already made a newsTicker in jQuery but need to pause on hover. What I have done so far follows:
a .php file newsticker.php
<html>
<head> <script src="include jquery files"> </script></head>
<div id="wrap">
<div id="head" class="block"></div>
<div id="content">
<div id="info" class="block">
<ul id="ticker">
<li>
<span>Title Lorem Ipsum 1</span>
<a href="#">some text that will be shown here.need to pause the
news on mouse hover and showing the news in different box</a>
</li>
<li>
<span>Title Lorem Ipsum 2</span>
<a href="#">some text that will be shown here.need to pause the
news on mouse hover and showing the news in different box</a>
</li>
</ul>
</div>
</div>
</div>
</body></html>
jQuery file common.js
$(document).ready(function() {
var ticker = function() {
setTimeout(function(){
$('#ticker li:first').animate({
marginTop: '-120px'},
800,
function() {
$(this).detach().appendTo('ul#ticker').removeAttr('style');
});
ticker();
}, 4000);
};
ticker();
});
How can I pause the news and show in different div box like found in here when mouse hovers?
run jsfiddle link here
First thing, there is a small bug inside. Then we use small trick.
var ticker = function()
{
setTimeout(function(){
$('#ticker li:first:not(.stop)').animate( {marginTop: '-120px'}, 800, function()
{
var me = $(this);
me
.clone(true)
.appendTo('ul#ticker')
.removeAttr('style')
me.remove();
});
ticker();
}, 4000);
};
ticker();
// simply toggle class on hover
// animation will not run with `li` having this class
$('#ticker li').hover(function() {
$(this).addClass('stop')
}, function() {
$(this).removeClass('stop')
});
Related
<a href="#">
<div class="col-md-5 campaigns" id="hoverimg">
<img class="featurette-image img-responsive" src="images/tee1.png" >
<li class="progressbar">
<p>
<!--<strong>Orders Completed</strong>--> <span class="pull-right small muted">78%</span>
</p>
<div class="progress tight">
<div class="bar" style="width: 78%;">
</div>
</div>
</li>
<div class="prodheading">
<h2>Heading 1</h2>
</div>
</div>
</a>
jQuery code:
<script>
$('document').ready(function ()
{
$(function ()
{
$("#hoverimg")
.mouseover(function ()
{
var src = $(this).attr("src").match(/[^\.]+/) + "images/tee2.png";
$(this).attr("src", src);
})
.mouseout(function ()
{
var src = $(this).attr("src").replace("images/tee2.png");
$(this).attr("src", src);
});
});
});
</script>
I am not getting the real problem behind this.
Your JavaScript is completely commented out by having // in front of every line. These will have to be removed if you want anything to happen.
There are some issues:
.replace() is a JavaScript String method and requires two arguments:
the regular expression and
the replacement string.
.match(/[^\.]+/) + "images/tee2.png probably does not work as you expect it to do: .match(/[^\.]+/) will return the first part of the string it is applied on that does not cointain a dot ('.'). Is this really what you want to do?
example:
"path/subpath/filename.ext".match(/[^\.]+/) + "images/tee2.png"
will return
"path/subpath/filenameimages/tee2.png"
You have applied the id to the div tag and in jquery you are trying to get the src. You must assign the id to the img tag.
$("#hoverimg1").hover(
function() {$(this).attr("src","images/teee2.png");},
function() {$(this).attr("src","images/teee1.png");
});
In my webpage I am using jquery tabs.
<script type="text/javascript">
$(document).ready(function()
{
$('#horizontalTab').responsiveTabs({
rotate: false,
startCollapsed: 'accordion',
collapsible: 'accordion',
setHash: true,
disabled: [3,4],
activate: function(e, tab) {
$('.info').html('Tab <strong>' + tab.id + '</strong> activated!');
}
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('#stop-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('stopRotation');
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('.select-tab').on('click', function() {
$('#horizontalTab').responsiveTabs('activate', $(this).val());
});
});
</script>
<div id="horizontalTab" style="margin-top:10px;">
<ul class="tabul">
<li class="tabli">
<?php echo lang('purchasedtickets');?>
</li>
<li class="tabli"><?php echo lang('gifted').' '.lang('tickets');?></li>
<li class="tabli"><?php echo lang('received').' '.lang('tickets');?></li>
</ul>
<div id="purchased"></div>
<div id="gifted"></div>
<div id="received"></div>
</div>
When I click on tab2 ie, #gifted tab, the corresponding result will be fetched from an ajax call and will be set to div with id gifted. In this sections I am using Codeigniter pagination. If I click on pagination link 2 of gifted section, the URL will come like http://domain.org/project/video/tickets/2#gifted where 2 in the URL is the page number.
After this, when I click on any other tab say tab1 ie, purchased tab, then the link of page will come like http://domain.org/project/teshot/video/tickets/2#purchased (instead of http://domain.org/project/teshot/video/tickets#purchased) which is appending the url of previous section.
I want to avoid this problem. How can I solve this?
Can ayone help me?
Thanks in advance.
I have a navigation which load dynamically content via ajax. But if I refresh the page or visit another url and go back the current content is away and I see the old content under the first menu tab.
Now I have to solve this problem.
The index.php include the elements header_registrated.inc.php, navigation.inc.php and main_container.inc.php
index.php:
<?php include("inc/incfiles/header_registrated.inc.php"); ?>
<?php
if (!isset($_SESSION["userLogin"])) {
echo "<meta http-equiv=\"refresh\" content=\"0; url=http://localhost/project\">";
}
else {
echo "";
}
?>
<?php include("inc/incfiles/navigation.inc.php"); ?>
<?php include("inc/incfiles/main_container.inc.php"); ?>
<?php include("inc/incfiles/footer.inc.php"); ?>
header_registrated.inc.php:
<?php
include ("inc/scripts/mysql_connect.inc.php");
session_start();
$user = $_SESSION["userLogin"];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/framework/jquery.js"></script>
<script language="JavaScript" src="js/dropdown/window.js"></script>
<script language="JavaScript" src="js/navigation/navigation.js"></script>
</head>
<body>
</body>
navigation.inc.php:
<div class="navigation">
<ul>
<li id="1">
<div id="menuImage1" class="menuImage"></div>
<div class="menuText"><p>Punkt 1</p></div>
<div class="navigationDart"></div>
</li>
<li id="2">
<div id="menuImage2" class="menuImage"></div>
<div class="menuText"><p>Punkt 2</p></div>
</li>
<li id="3">
<div id="menuImage3" class="menuImage"></div>
<div class="menuText"><p>Punkt 3</p></div>
</li>
<li id="4">
<div id="menuImage4" class="menuImage"></div>
<div class="menuText"><p>Punkt 4</p></div>
</li>
<li id="5">
<div id="menuImage5" class="menuImage"></div>
<div class="menuText"><p>Punkt 5</p></div>
</li>
<li id="6">
<div id="menuImage6" class="menuImage"></div>
<div class="menuText"><p>Punkt 6</p></div>
</li>
</ul>
</div>
main_container.inc.php:
<div class="mainContainer">
<div class="containerHeader">
<div class="contentHeader">
</div>
</div>
<div class="contentContainer">
<div class="content">
</div>
<div class="advertisement">
</div>
</div>
</div>
Now the divs content, cnotentHeader and advertisement (in file main_content.inc.php) is filled via ajax. Also the navigation has some jquery effects which also have to be the same after page refresh.
navigation.js:
$(document).ready(function() {
$.get('inc/incfiles/content_container/header/1.php', function(data) {
$('.contentHeader').html(data);
});
$.get('inc/incfiles/content_container/content/1.php', function(data) {
$('.content').html(data);
});
$.get('inc/incfiles/content_container/advertisement/1.php', function(data) {
$('.advertisement').html(data);
});
var current = '1.php';
$(".navigation li").click(function() {
var quelle = $(this).attr('id') + ".php";
// the current content doesn't load again
if(current === quelle) {
return;
}
current = quelle;
// content
$(".content").fadeOut(function() {
$(this).load("inc/incfiles/content_container/content/" + quelle).fadeIn('normal');
})
// advertisement
$(".advertisement").fadeOut(function() {
$(this).load("inc/incfiles/content_container/advertisement/" + quelle).fadeIn('normal');
})
// header
$(".contentHeader").fadeOut(function() {
$(this).load("inc/incfiles/content_container/header/" + quelle).fadeIn('normal');
})
});
$(".navigation li").click(function() {
$(".menuImage").removeClass("menuImageActive1");
$(".menuImage").removeClass("menuImageActive2");
$(".menuImage").removeClass("menuImageActive3");
$(".menuImage").removeClass("menuImageActive4");
$(".menuImage").removeClass("menuImageActive5");
$(".menuImage").removeClass("menuImageActive6");
});
$("#1").mousedown(function() {
$("#menuImage1").addClass("menuImageClick1"); // new class on mouse button press
});
$("#1").mouseup(function() {
$("#menuImage1").removeClass("menuImageClick1"); //remove class after mouse button release
});
$("#1").click(function() {
$("#menuImage1").addClass("menuImageActive1");
});
$("#2").mousedown(function() {
$("#menuImage2").addClass("menuImageClick2"); // new class on mouse button press
});
$("#2").mouseup(function() {
$("#menuImage2").removeClass("menuImageClick2"); //remove class after mouse button release
});
$("#2").click(function() {
$("#menuImage2").addClass("menuImageActive2");
});
$("#3").mousedown(function() {
$("#menuImage3").addClass("menuImageClick3"); // new class on mouse button press
});
$("#3").mouseup(function() {
$("#menuImage3").removeClass("menuImageClick3"); //remove class after mouse button release
});
$("#3").click(function() {
$("#menuImage3").addClass("menuImageActive3");
});
$("#4").mousedown(function() {
$("#menuImage4").addClass("menuImageClick4"); // new class on mouse button press
});
$("#4").mouseup(function() {
$("#menuImage4").removeClass("menuImageClick4"); //remove class after mouse button release
});
$("#4").click(function() {
$("#menuImage4").addClass("menuImageActive4");
});
$("#5").mousedown(function() {
$("#menuImage5").addClass("menuImageClick5"); // new class on mouse button press
});
$("#5").mouseup(function() {
$("#menuImage5").removeClass("menuImageClick5"); //remove class after mouse button release
});
$("#5").click(function() {
$("#menuImage5").addClass("menuImageActive5");
});
$("#6").mousedown(function() {
$("#menuImage6").addClass("menuImageClick6"); // new class on mouse button press
});
$("#6").mouseup(function() {
$("#menuImage6").removeClass("menuImageClick6"); //remove class after mouse button release
});
$("#6").click(function() {
$("#menuImage6").addClass("menuImageActive6");
});
$("#1").click(function(){
$(".navigationDart").animate({
top: "16px"
}, 500 );
});
$("#2").click(function(){
$(".navigationDart").animate({
top: "88px"
}, 500 );
});
$("#3").click(function(){
$(".navigationDart").animate({
top: "160px"
}, 500 );
});
$("#4").click(function(){
$(".navigationDart").animate({
top: "232px"
}, 500 );
});
$("#5").click(function(){
$(".navigationDart").animate({
top: "304px"
}, 500 );
});
$("#6").click(function(){
$(".navigationDart").animate({
top: "376px"
}, 500 );
});
});
My idea was it to work with if(isset($_SESSION['ajaxresponse'])) but I don't no how to do this.
Please help me. I have the feeling that I've searched the whole web to find an answer.
I recomend using a library that ties PHP to jQuery through AJAX and can ease your problems a lot. the library is phery http://phery-php-ajax.net
just some optimization for your navigation.js file:
You'll need to centralize (or not) the AJAX in one file, to make it easier.
It can go on the top of your index.php
function load($data){
$r = new PheryResponse;
if (!isset($_SESSION["userLogin"])) {
return $r->redirect('http://localhost/project');
}
$path = 'inc/incfiles/content_container/';
if (isset($data['id'])){
$id = $data['id']. '.php';
} else {
if (!empty($_SESSION['id'])){
$id = $_SESSION['id'];
} else {
$id = '1.php';
}
}
$_SESSION['id'] = $id; // save the current ID and will load next time the person refreshes the page
ob_start();
include $path.'content/'.$id;
$content = ob_get_clean();
ob_start();
include $path.'advertisement/'.$id;
$ads = ob_get_clean();
ob_start();
include $path.'header/'.$id;
$header = ob_get_clean();
$r
->jquery('.advertisement')->html($ads)
->jquery('.contentHeader')->html($header)
->jquery('.content')->html($content)
;
// etc
return $r->this()->find('.menuImage')->addClass('menuImageActive'); // set the current menuImage of the LI element to menuImageActive
}
session_start();
Phery::instance()->set(array(
'load' => 'load'
))->process();
Since your JS it non-performant right now, I've redone it:
$(function() {
phery.remote('load');
var menu_image = $(".menuImage");
$(document)
.on('click', '.navigation li', function(event){
menu_image.removeClass("menuImageActive");
var top;
switch (event.currentTarget.id){
case '1':
top = "16px";
break;
case '2':
top = "88px";
break;
case '3':
top = "160px";
break;
case '4':
top = "232px";
break;
case '5':
top = "304px";
break;
case '6':
top = "376px";
break;
}
$(event.currentTarget)
.find(".navigationDart").animate({ top: top }, 500);
})
.on('mousedown', '.navigation li', function(event){
$(event.currentTarget).addClass('menuImageClick');
})
.on('mouseup', '.navigation li', function(event){
$(event.currentTarget).removeClass('menuImageClick');
});
});
and your navigation.inc.php will have to be:
<div class="navigation">
<ul>
<li id="1" data-remote="load" data-args="{'id':1}">
<div id="menuImage1" class="menuImage"></div>
<div class="menuText"><p>Punkt 1</p></div>
<div class="navigationDart"></div>
</li>
<li id="2" data-remote="load" data-args="{'id':2}">
<div id="menuImage2" class="menuImage"></div>
<div class="menuText"><p>Punkt 2</p></div>
</li>
<li id="3" data-remote="load" data-args="{'id':3}">
<div id="menuImage3" class="menuImage"></div>
<div class="menuText"><p>Punkt 3</p></div>
</li>
<li id="4" data-remote="load" data-args="{'id':4}">
<div id="menuImage4" class="menuImage"></div>
<div class="menuText"><p>Punkt 4</p></div>
</li>
<li id="5" data-remote="load" data-args="{'id':5}">
<div id="menuImage5" class="menuImage"></div>
<div class="menuText"><p>Punkt 5</p></div>
</li>
<li id="6" data-remote="load" data-args="{'id':6}">
<div id="menuImage6" class="menuImage"></div>
<div class="menuText"><p>Punkt 6</p></div>
</li>
</ul>
</div>
it seems your CSS is convoluted for the simplicity of your HTML. And you shouldn't be using a number for an ID, IDs needs to be You should be reusing css classes in this case, like
.menuImageActive {
/* common styles */
}
.menuImageClick {
/* common styles */
}
/* apply per ID */
#menuImage1.menuImageActive {
}
#menuImage1.menuImageClick {
}
#menuImage2.menuImageActive {
}
#menuImage2.menuImageClick {
}
#menuImage3.menuImageActive {
}
#menuImage3.menuImageClick {
}
#menuImage4.menuImageActive {
}
#menuImage4.menuImageClick {
}
#menuImage5.menuImageActive {
}
#menuImage5.menuImageClick {
}
#menuImage6.menuImageActive {
}
#menuImage6.menuImageClick {
}
Try out jQuery UI tabs if you need dynamically loaded tabs, it has built in AJAX support.
If you want back/forward support for AJAX events try out the jQuery address plugin.
There is a good answer on how to use jQuery UI tabs with back/forward history here:
I have this javascript :
<script type="text/javascript">
$(document).ready(function($) {
$('#target-share ul li').click(function() {
$('input#shareto').val($(this).data('val'));
});
});
</script>
and it really works as I expected. but when I add this another javascript to do drop-down animation, that javascript not working anymore :
<script type="text/javascript">
$(document).ready(function() {
$("#select-shareto a").click(function () {
var newClass = $(this).find("span").attr('class');
var newText = $(this).find("span").text();
$("#select-shareto a").removeClass("selected");
$(this).addClass("selected");
$("a#to-chosen span").removeClass().addClass(newClass).text(newText);
$("a#to-chosen").toggleClass("opened");
$('#select-shareto').slideToggle('fast');
return false;
});
$('a#to-chosen').click(function() {
$(this).toggleClass("opened");
$('#select-shareto').slideToggle('fast', function() {
// Animation complete.
});
});
});
</script>
those javascript actually affected on this HTML code :
<div id="target-share">
<span class="to-admin">Admin</span>
<ul id="select-shareto">
<li data-val="0-1">
<span class="to-Finance">Finance</span>
</li>
<li data-val="1-1">
<span class="to-admin-private">Admin Private</span>
</li>
<li data-val="1-0">
<span class="to-ceo">CEO</span>
</li>
<li data-val="0-0">
<span class="to-ceo-private">CEO Private</span>
</li>
</ul>
<input id="shareto" type="text" value="0-1" name="shareto">
</div><!-- #target-share -->
any idea how to make those 2 javascript works side-by-side? thanks.
$("#select-shareto a").click(function () {
...
return false;
});
Hereby, you stop the further propagation of this event - other handlers for this click event won't be called any more. Instead, use this:
$("#select-shareto a").click(function (e) {
e.preventDefault();
...
});
(Demo at jsfiddle.net)
I'm assuming you tried to insert the code where the comment animation complete is and if so you just need to put the code:$('#target-share ul li').click(function() { $('input#shareto').val($(this).data('val'));});
Your code is already wrapped in a $(document).ready so you don't need another one.
I have a problem with auto updating a div. I have a script as shown below which refreshes the page content (like facebook) every 1 minute. The problem is that this div is newly added to the page and that it contains some ajax/jQuery elements to add effects.
function loadNewPosts(){
var id = $(".altbgcolor:first").attr("id");
$.get('/update.php', { updateid: id ,catid:'technology' }, function(data){
$(".newslist").prepend(data);
}, 'html');
}
window.setInterval(loadNewPosts, 1000*60)
Below is an example of div its supposed to populate if found via update.php
<li class="altbgcolor" id=755>
<div> <a href=http://mashup2.sunnydsouza.com/technology/755/ target="_blank" rel="nofollow">
<div class="newsthumb" center center no-repeat;"><img src="http://mashup2.sunnydsouza.com/timthumb.php?src=/images/tech/thumb-755.jpg&h=100&w=100&zc=1&a=t" /></div>
</a>
<div class="newstext" style="margin:0px;">
<h1 style="color:#081C28;"><img width="11" height="9" src="/content/icon_topic_newest.gif"> Top 5 Android Apps for Travel </h1>
<!--<i><font color=red size=1.2>Technology</font></i><br>-->
<div style="font-size: 0.4em; color:#666666;">
<!-- AddThis Button BEGIN -->
<!--<span class="st_email" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span>
<span class="st_facebook" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span>
<span class="st_twitter" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=sunnydsouza"></script>-->
<!-- AddThis Button END -->
<span style="text-decoration:none; color:none; "><i> via demo1</i></span>
<span style="text-decoration:none; color:none; ">
<a class="example7" href="comments_3.php?id=755" style="text-decoration:none; color:#666666; "><img src="content/comment/comments.png" width=18 height=18><i>No comments</i></a></span>
<span style="text-decoration:none; color:none; margin:5px;"><img src="content/voting/eye.png" > 17</span>
<!-- Vote Buttons #vote-->
<span class="vote" id="755" name="up" style="text-decoration:none; color:none; margin:5px; ">
<img src="/content/voting/yes-enb.png" width=12 height=12 alt="">
<span style="text-decoration:none; color:none">1 </span></span>
<!-- Vote Buttons ENDS #vote-->
<br>
<i><font color=red size=1.2>Technology</font></i>
</div>
<!--<h1>read...</h1>-->
</div><div class="clear"></div>
</div>
<div class="sharedp">
<span class="st_email" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span>
<span class="st_facebook" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span>
<span class="st_twitter" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span>
</div>
</li>
Though the above code calls the update.php every 1 minute and adds elements to the current page. The current div is devoid on the javascript element
This is the javascript on the main page which attaches itself to every div on every element initially to the span class="vote"
// thumbs up / thumbs down code
$(function() {
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if (name=='up')
{
//$(this).fadeIn(200).html('<img src="/content/voting/yes-enb.JPG" />');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.find('span').html(html);
}
});
}
return false;
});
});
However for the new elements added during the auto update, when clicking on the vote button..nothing happens.
Why is this happening. Why is the jQuery mentioned in the page at start not working for the auto newly added divs?
Please help
EDIT:: I have 2 more javascript elements. How do i convert them to .live ?
$(document).ready(function(){
$(".altbgcolor").hover(function() {
$(this)
.addClass('altbgcolor-active')
.find(".sharedp")
.slideDown('slow');
},function () {
$(this)
.removeClass('altbgcolor-active')
.find(".sharedp")
.slideUp('slow');
});
$(".example7").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
)};
});
EDIT2: This is what I am trying, Please validate if its correct...
$(".altbgcolor").live('hover',function() {
$(this)
.addClass('altbgcolor-active')
.find(".sharedp")
.slideDown('slow');
},function () {
$(this)
.removeClass('altbgcolor-active')
.find(".sharedp")
.slideUp('slow');
});
$(function() {
$(".vote").live('click', function () {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if (name=='up')
{
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function (html) {
parent.find('span').html(html);
}
});
}
return false;
});
});
Have you considered jQuery's live() for this? It will attach the eventhandler to all current and future elements.