I have a chat with setInterval and it's refreshing a div (where messages are), but the problem is when i select the message with my mouse (blue marker) and for example i want to copy something from it, the timer refreshes the chat div and it won't let me do that. It automaticly disables the marked text, i hope you understand me what i'm talking about.
setInterval('test()', 1000);
function test(){
$('#chatbox').load('load.php?chat_refresh');
$("#online-users-text").load(location.href+ ' #online-users-text');
<?php
$query_chat = $handler->query('SELECT * FROM users');
while($ch = $query_chat->fetch()){
if($ch['status'] == 1){
?> Chat_Refresh(); <?php
}
}
?>
}
As you can see in the code, timer is calling function test() after every second, and that function is calling $('#chatbox').load('load.php?chat_refresh'); which is refreshing load.php?chatrefresh from another page:
if(isset($_GET['chat_refresh'])){
$query = $handler->query('SELECT * FROM (SELECT * FROM chat ORDER BY id DESC LIMIT 15) AS chat ORDER BY id ASC');
while($r = $query->fetch()){
$strText = preg_replace( '/(http|ftp)+(s)?:(\/\/)((\w|\.)+)(\/)?(\S+)?/i', '<span style="text-decoration: underline;">\0</span>', showBBcodes($r['message']) );
?>
<?php if(empty($r['owner'])){ ?> <!-- Clear chat -->
<div class="chat-body clearfix">
<div class="header">
<span style="line-height: 40px; visibility: hidden;">test</span>
</div>
</div>
<?php }else{ ?>
<ul class="chat"> <!-- Show chat -->
<li class="left clearfix">
<span class="chat-img pull-left">
<img src="<?php echo BASE_URL, $r['avatar']; ?>" class="img-thumbnail" width='40' height='40' />
</span>
<div class="chat-body clearfix">
<div class="header">
<span style="line-height: 40px; color: #737373;">
<b><?php echo $r['owner']; ?></b>:</span> <span class="text"><?php echo parseSmiley($strText); ?></span> <small style="line-height: 40px; margin-right: 5px;" class="pull-right text-muted"><i class="fa fa-clock-o"></i> <?php echo $r['created']; ?></small>
</div>
</div>
</li>
</ul>
<?php }
}
}
When i go to google chrome console, i can clearly see that timer is refreshing #chatbox div and that div is blinking.
Related
So I have the following code:
$sql="SELECT * FROM $tbl_name ORDER BY id DESC";
$result=mysql_query($sql);
while($rows=mysql_fetch_array($result)){
$links = $rows['links'];
$linksArray = explode(',', $links);
if ($links == ""){
unset($linksArray);
}
?>
//LINK TO ACTIVATE POPUP BOX
<a href="#popup1">
<div class="newsBox">
<h2><?php echo $rows['title'] ?></h2>
<h4>Posted # <?php echo $rows['date'] ?></h4>
<?php
if (!empty($linksArray)){
?>
<span><i>Links associated with this post:</i>
<? } ?>
<?php
foreach($linksArray as $link) {
?>Here</span>
<?
}
?>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
<?php echo $rows['news'] ?>
</div>
</div>
</div>
</div>
<br>
</a>
<?php
}
mysql_close();
?>
For each row identified by my query, it links it to a popup box. However all the rows being outputted activate the same popup box. My question is how to create my popup box such that each row being outputted is linked to different popup boxes, if that makes sense. Such as the first row, when linked opens a popup box with that row's info. The next row after, when linked opens a popup box with that row's info, and so on. (I guess maybe like a dynamic popup box?)
Add a counter in your loop and where you have your <a href="#popup1"> and <div id="popup1" class="overlay"> add in the counter variable like <a href="#popup<?php echo $x ?>"> and <div id="popup<?php echo $x ?>" class="overlay">
This would make your popup id unique.
How can I make a content slider, like the popular product sliders shown on most websites (Flipkart, Amazon), which scroll left and right on button click, similar to this image:
I have only four contents showing, but I want to add some more, and I want it to slide on button click. Sorry, I dont know the exact term for it.
These content values would be dynamic.
<div class="dialog">
<div class="shop_img">
<img src="../image/shops/1.jpg">
</div>
<hr id="hr">
<div class="shop_name">
<?php echo $name;?>
</div>
<a href="detail.php?add=<?php echo $add_id;?>"><div class="address">
<span id="1">ADDRESS</span><span id="2"><i class="fa fa-arrow-right" aria-hidden="true"></i></i></span>
</div></a>
</div>
This is called carousel.
You can use a javascript plugin called owl carousel from here http://www.owlcarousel.owlgraphic.com/ to achieve that effect.
You can use php foreach loop to dynamically generate your carousel items inside carousel container like below:
<?php
foreach ($items as $key => $item) {
ob_start();
?>
<div class="dialog">
<div class="shop_img">
<img src="../image/shops/<?php echo $item->imageName;?>">
</div>
<hr id="hr">
<div class="shop_name">
<?php echo $item->name;?>
</div>
<a href="detail.php?add=<?php echo $item->id;?>"><div class="address">
<span id="1">ADDRESS</span><span id="2"><i class="fa fa-arrow-right" aria-hidden="true"></i></i></span>
</div></a>
</div>
<?php
$itemHtml = ob_get_clean();
print $itemHtml;
}
?>
I'm working on modifying an existing wordpress portfolio page. All that is left to do is to make it so when the user clicks anywhere in the article list the link will open. Currently it is just when the title or image is clicked.
I can see that I could make a clickable with the following setup:
<a href="http://example.com">
<div>
anything
</div>
</a>
However Wordpress moves the tags when the page loads like so:
<a href="http://example.com">
</a>
<div>
anything
</div>
So I started to work on using css with the following setup:
HTML
<div class= "box">
</div>
CSS
div.box {
position: relative;
}
div.box:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}
The hover works, it triggers over all of the content and a cursor does appear.
However thats as much as I can do so far. Any attempt to interact with the .box is shot down. Nothing will trigger with javascript using the following :
$(".box").click(function() {
alert("I am an alert box!");
});
I cannot seem to interact with the div.
The page is as follows:
<div class= "box">
<article id="post-<?php the_ID(); ?>" class="portfolio-article clearfix">
<?php if( get_post_meta($post->ID, "portfolio_image", true) ): ?>
<img src="<?php the_field('portfolio_image'); ?>" class="portfolio-image">
<!--get PDF if not empty-->
<?php else: ?>
<img src="http://domain.com/wp-content/uploads/2014/02/placeholder.png" class="portfolio-image">
<?php endif; ?>
<div class="portfolio-content">
<header>
<?php if( get_post_meta($post->ID, "portfolio_link", true) ): ?>
<h1 class="portfolio-title">
<a target="_blank" href="<?php the_field('portfolio_link'); ?>">
<?php the_field('portfolio_title'); ?> <span class="sosa-icon">p</span>
</a>
</h1>
<!--get PDF if not empty-->
<?php else: ?>
<h1 class="portfolio-title"><?php the_field('portfolio_title'); ?></h1>
<?php endif; ?>
</header>
<p class="portfolio-meta">
<?php the_field('portfolio_publication_and_date'); ?>
<?php if( get_post_meta($post->ID, "portfolio_pdf_upload", true) ): ?>
<span class="sosa-icon">H</span> Open Pdf<!--get PDF if not empty-->
<?php endif; ?>
</p><!-- END ortfolio-meta -->
</div><!--portfolio-content-->
</article>
</div>
NewToJS was in the right area when saying it could be a problem with the access to the jQuery library. In this case I had linked jQuery correctly, it was tested and working.
jQuery in Wordpress needs to be enqueued by adding the following into functions.php
wp_enqueue_script("jquery");
My fault was because I didn't change the '$' to 'jQuery' as this is necessary when working with Wordpress.
Here is the incorrect usage :
$(".box").click(function() {
alert("I am an alert box!");
});
Here is the correct usage :
jQuery(".box").click(function() {
alert("I am an alert box!");
});
PHP
<div id="lightbox" class="row filteredVideoContent">
<?php
foreach ( $aVideo as $oVideo ){?>
<div class="col-sm-6 col-md-3 col-lg-3 photography app" id="load_data">
<div class="portfolio-item">
<!-- <div class="hover-bg"> -->
<div class="">
<a href="#video_container" data-backdrop="static" class="video_thumb" data-toggle="modal" data-videopath="<?php echo $oVideo['videoPath']; ?>" data-videosubject="<?php echo $oVideo['videoSubject']; ?>">
<div class="hover-text" data-toggle="tooltip" data-placement="right" title="<?php echo $oVideo[ 'videoSubject' ];?>">
<h4> <?php echo substr($oVideo[ 'videoSubject' ],0,20); ?> </h4>
</div>
<?php
if( ! empty( $oVideo[ 'videoThumb' ] ) )
{
$thumbName = $oVideo[ 'videoThumb' ];
}
else
{
$thumbName = "assets/video/common.jpg";
}
?>
<img style="height:188px;width : 263px"
src="<?php echo base_url () . $thumbName ?>" class="videoThumb img-responsive"
alt="<?php echo $oVideo[ 'videoSubject' ];?>">
</a>
</div>
<div>Uploaded By : <span data-toggle="tooltip" data-placement="right" title="<?php echo $oVideo[ 'userName' ];?>"> <?php echo substr($oVideo[ 'userName' ],0,20);?> </span></div>
<div>HQ : <span data-toggle="tooltip" data-placement="right" title="<?php echo #$oVideo[ 'hq' ];?>"> <?php echo substr(#$oVideo[ 'hq' ],0,20);?> </span></div>
<div>Subject : <span data-toggle="tooltip" data-placement="right" title="<?php echo $oVideo[ 'videoSubject' ];?>"> <?php echo substr($oVideo[ 'videoSubject' ],0,20);?> </span></div>
</div>
</div>
<?php
}
?>
</div>
<?php if(count($aVideo) > 8){ ?>
<p class="dash">―――――――――――――――――――――――――――――――
<button id="showAll" class="btn tf-btn btn-default" style="float:none;">Load More</button>
―――――――――――――――――――――――――――――――</p>
<?php } ?>
</div>
jQuery
$('#showAll').on('click', function(e){
e.preventDefault();
$('.filteredVideoContent .app').filter(':hidden').show();
$('#showAll').hide();
$('.dash').hide();
});
$('#videoSearchInput').on('keyup',function(e){
e.preventDefault();
$('#showAll').show();
$('.dash').show();
});
});
CSS
.filteredVideoContent .app{
display: none;
}
.filteredVideoContent .app:nth-child(1),
.filteredVideoContent .app:nth-child(2),
.filteredVideoContent .app:nth-child(3),
.filteredVideoContent .app:nth-child(4),
.filteredVideoContent .app:nth-child(5),
.filteredVideoContent .app:nth-child(6),
.filteredVideoContent .app:nth-child(7),
.filteredVideoContent .app:nth-child(8) {
display: block;
}
p { letter-spacing: 1px;}
p button { letter-spacing: 1px; margin: 0 5px; }
Now When I click On Load more button Hidden data are shown. But when I click On that button I want scroll direct to new data which is hidden or above shown data automatically scroll down to new data which is appear on button click.
Try this. You just need the get the first of the divs which you are going to show and scroll the document to position of that element.
$('#showAll').on('click', function(e){
e.preventDefault();
$scrollToElement = $('.filteredVideoContent .app:hidden').first();
$('.filteredVideoContent .app').filter(':hidden').show();
$('#showAll').hide();
$('.dash').hide();
$('html, body').animate({
'scrollTop' : $scrollToElement.position().top
});
});
On click of "Load More", you can use this to scroll the content to top
var body = $("html, body");
body.stop().animate({scrollTop:Math.round(jQuery("#hiddenContainer").offset().top-65)}, '500', 'swing', function() {
console.log("Finished animating");
});
Where jQuery("#hiddenContainer") is the hidden container ID
If you look at my URL below, and on a connection that may not be really speedy. You'd notice the slider at the top, loads each individual slide in a vertical list (Taking about 1000px space) before snapping into the way it's supposed to render - which is like a standard slider; displaying and sliding one slide at a time.
Does anyone have any suggestions as to how to allow my slider to load correctly?
Live site at >> http://tinyurl.com/cz6sawg
--- Thanks for any pointers, I'm thinking I need to find a script that allows the slides to be hidden until the slider / page is fully loaded before presenting them.
Relevant jQuery:
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});
</script>
Relevant Mark-Up:
<!-- Top of Page Slider FRAGILE -->
<div style="min-height: 280px;">
<div id="photo-rotator" style="">
<?php $slide_id=1; ?>
<?php
$featuredPosts = new WP_Query();
$featuredPosts->query("showposts=3");
while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
?>
<div id="slide-<?php echo $slide_id; $slide_id++;?>">
<a href="<?php the_permalink() ?>" class="post-image">
<?php the_post_thumbnail( 'rotator-post-image' ); ?>
<span class="title" style="font-style:italic; color:#999;"><?php the_title(); ?></span>
</a>
</div>
<?php endwhile; ?><!--/close loop-->
<ul id="slide-nav">
<?php $nav_id=1; ?>
<?php while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<li>
<a href="#slide-<?php echo $nav_id; ?>">
<span class="thumbnail" style="display:none;">
</span>
<p style="color:#F93; font-family:Georgia, 'Times New Roman', Times, serif; font-size: 18px;"><? the_title(); $nav_id++;?></p>
<div style="">
<!--<?php the_excerpt(); ?>-->
<?php if($text= get_post_meta($post->ID, "slidetext", true)) { ?>
<div class="">
<p style="font-weight: normal; color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 14px;"><?php echo $text; ?></p>
</div>
<?php } //else { print"<div>"; } ?>
</div>
</a>
</li>
<?php endwhile; ?><!--/close loop-->
</ul>
</div>
</div>
<!-- End Top page Slider FRAGILE -->
Your code is a bit messy, and the question does not help, but in relation to the part of your question where it reads:
ou'd notice the slider at the top, loads each individual slide in a vertical list (Taking about 1000px space) before snapping into the way it's supposed to render
You can wrap the entire slider content with a div and give overflow:hidden; to prevent the height of +/-1000px on the page load:
CSS
#photo-rotatorWrapper {
width: 960px;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
HTML
<div id="photo-rotatorWrapper">
<div id="photo-rotator">
...
</div>
</div>
Note:
You may need to set other CSS declarations for that wrapper in order to stay positioned correctly within your current HTML structure.