I want to load a few flash banners on my single page.
I'm using swfobject ( http://code.google.com/p/swfobject/ ). When i'm loading these ten banners in traditional way - just static way, often some of them (3-4) are not loaded, just empty field, when I refresh page - there are always some banners not loaded. Is there a way to load them all in a way, that they will work properly? : ) Maybe some asynchronous loading?
I'm using codeigniter and PHP.
I'm trying to load them in that way:
<?php foreach($category_res as $results){ ?>
<script type="text/javascript">
var id = <?php echo $results['id'];?>;
swfobject.registerObject("banner"+id, "9.0.115");
</script>
<div class="baner">
<div class="kreacja" style="padding-top:25px;" onclick="return false;">
<object id="banner<?php echo $results['id']; ?>" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" >
<object class="flash_banner" type="application/x-shockwave-flash" data="<?php echo '/prod_bann/kategorie/'.$results['category_name'].'/'.$results['file']; ?>"></object>
</object>
</div>
</div>
<?php } ?>
UPDATE
I've also tried dynamic SWf fiels embedding - but it's even worse. More banners are not loaded, here's code:
<script type="text/javascript">
var id = <?php echo $results['id'];?>;
var path = "<?php echo '/prod_bann/kategorie/'.$results['category_name'].'/'.$results['file']; ?>";
swfobject.embedSWF(path, "banner"+id, "300", "120", "9.0.0");
</script>
<div class="baner">
<div class="kreacja" style="padding-top:25px;" onclick="return false;">
<div id="banner<?php echo $results['id']; ?>" >
</div>
</div>
</div>
<?php } ?>
Related
I want to display two images from database when user clicks a button. But 2nd image should display after 5 seconds of delay of displaying image 1. I tried using sleep(5) like this
//Image extraction query
$c1 = mysqli_query($con, "") or die (mysqli_query($con));
$c2 = mysqli_fetch_array($c1) or die (mysqli_error($con));
echo '<div class="col-xs-12">
<div class="col-xs-5">
<img src='. $c2['bpic'].' /></div>'; // 1st Image
sleep(5);
echo '<div class="col-xs-5">
<img src='. $c2['apic'].' /></div>';
Tried using setInterval with load in jquery but it reloads the <div> every 5 seconds.
Can somebody guide me how to do this?
But whole page waits for 5 seconds to load. Then both the images will display together.
EDIT
javascript
<script type="text/javascript">
var autoLoad = setInterval(
function ()
{
$('#loadpic').load('load_pic.php?id=<?php echo $id; ?>').fadeIn("slow");
}, 5000); // refresh page every 5 seconds
</script>
HTML
echo '<div class="col-xs-5" id="loadpic" style="display:none;">
<img src='. $c2['apic'].' /></div>';
Use javascript for client-side manimulation...
Use setTimeout for one event...
setTimeout(function(){
$('#img2').show();// or slideDown(); or fadeIn();
}, 5000);//wait 5 sec
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-12">
<div class="col-xs-5">
<img src="https://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
</div>
</div>
<div class="col-xs-12" style="display:none;" id="img2">
<div class="col-xs-5">
<img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</div>
</div>
I have integrated flowplayer in my website.
As a next step, I want to trigger its video play function, so that when a user plays a video, she/he will simply press a play button, that will call a function.
Can anybody please help me achiving that?
I am trying to do this:
<script language="javascript">
$(document).ready(function(){
$( ".fp-play" ).change(function() {
alert( "Handler for .click() called." );
});
});
</script>
This is my HTML code:
<div class="artist_vidoe_player fl clear">
<div class="flowplayer" data-swf="<?php echo WEB_URL; ?>assets/styles/frontend/js/flowplayer.swf" data-ratio="0.4167">
<video>
<source type="video/flv" src="<?php echo WEB_URL; ?>assets/styles/uploads/videos/<?php echo $rowvid->v_uploadname; ?>">
</video>
</div>
<div style="float:left; margin-top:15px;">
<div class="clear"></div>
<h1><?php echo $rowvid->v_filename; ?></h1>
<p>258 Views</p>
<p><img src="<?php echo WEB_URL; ?>assets/styles/frontend/images/stars_img.png" width="90" height="16" alt="" /></p>
</div>
</div>
The above code dynamically generates my videos, but this is all not working for me anyway.
You can use .click() instead of .change() as well as using .trigger() to trigger click event:
$(document).ready(function(){
$( ".fp-play" ).click(function() {
alert( "Handler for .click() called." );
}).trigger('click');
});
Here is the JavaScript I use to animate slider (fade effect) of the content I read from database:
<script language="javascript">
jQuery(document).ready(function ()
{
var terms = ["span_1","span_2"];
var i = 0;
function rotateTerm() {
jQuery("#text-content").fadeOut(200, function() {
jQuery(this).text(jQuery('#text-slider .'+terms[i]).html()+i).fadeIn(200);
});
jQuery("#title-content").fadeOut(200, function() {
jQuery(this).text(jQuery('#title-slider .'+terms[i]).html()+i).fadeIn(200);
i == terms.length - 1 ? i=0 : i++;
});
}
rotateTerm();
setInterval(rotateTerm, 1000);
});
</script>
And here is the PHP code I use:
<?php
if (!empty($testLst)) :
$num=1;
foreach($testLst as $key=>$item):
$item->slug = $item->id;
$item->catslug = $item->catid ;
?><div id="hidden-content" style="display:none;">
<div id="title-slider">
<span class="<?php echo 'span_'.$num; ?>">
<h4><a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($item->id, $item->catid)); ?>">
<?php echo $item->title; ?></a>
</h4>
</span>
</div>
<div id="text-slider">
<span class="<?php echo 'span_'.$num; ?>">
<p>
<?php
$concat=array_slice(explode(' ',$item->introtext),0,20);
$concat=implode(' ',$concat);
echo $concat."...";
?>
</p>
</span>
</div></div>
Learn more >></p>
<?php
$num++;
endforeach;
endif;
?>
<div id="title-content">
</div>
<div id="text-content">
</div>
And here is a JSFiddle page reproducing what I would like to do.
My problem is that I am getting data that still has HTML tags, however I would like the output to have my CSS styles.
You could clone the node, and set that to be the new content of the target elements, to keep everything in jQuery objects, but personally, I'd use the .outerHTML property.
I've updated your fiddle to show you what I mean: I've changed the .text(...set content here) to .html(), because we're injecting HTML content. Then, I added [0] at the end of your selector, to return the raw element reference, which gives access to all standard JS properties and methods an element has, and just went ahead and fetched the outerHTML... easy-peasy
So I have something like this:
<?php foreach($post_array as $post): ?>
<div class="postBodyWrapper">
<div class="vid-link">
<script type="text/javascript">
$(function() {
$(".vidthumb").append("<img class='thumb' src='<?php echo $post->vid_link; ?>'/>");
});
</script>
<div class="vidthumb"></div>
</div>
</div>
<?php endforeach; ?>
Let's say I have five posts in the $post_array. Then the <div class="vidthumb"></div> of each post will contain all five images (that are generated from the JavaScript code), instead of only the one that is supposed to. How can I fix it?
Try:
<?php $i = 0; foreach($post_array as $post): ?>
<div class="postBodyWrapper">
<div class="vid-link">
<script type="text/javascript">
$(function() {
$("#vidthumb_<?php echo $i ?>").append("<img class='thumb' src='<?php echo $post->vid_link; ?>'/>");
});
</script>
<div id="vidthumb_<?php echo $i++ ?>"></div>
</div>
</div>
<?php endforeach; ?>
By giving each vidthumb div you want the thumb to appear in a unique ID, you can now target the specific div's instead of the first match.
Alright not sure what to do and i am honestly bit lost. What I am trying to do is upload a file to site via jQuery and push it to PHP which then deletes original image file and makes a a copy of it called header.jpg and pushes it where it needs to go. That part works with no problem. The problem here is how would I go about updating the div element if the header.jpg image is the background?
Note: no matter what the img will always be header.jpg but it needs to be re-cached by browser and outputed to user without page refresh
Here is how the header div is layed out
<div id="headerEmpty"></div>
<div id="pageName">
<h2><?php echo $pageName; ?></h2>
</div>
<?php if ( $_SESSION['signed_in'] == true ) { ?>
<div id="header" style="background-image:url(uploads/header.jpg);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>
<?php } else { ?>
<div id="header"></div>
<?php } ?>
and here is the jquery bit which displays loader and auto-starts the upload process
$('#photoimg').live('change', function() {
$("#preview").html('');
$("#preview").html('<img src="uploads/icon/16/ajax-loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#header',
success : function(data) {
$("#header").html(data).fadeIn('fast');
}
}).submit();
});
When you want to update the image, change it's source. You can append a time-stamp to the source so it will not come from the browser's cache. In PHP that would be something like:
<div id="headerEmpty"></div>
<div id="pageName">
<h2><?php echo $pageName; ?></h2>
</div>
<?php if ( $_SESSION['signed_in'] == true ) { ?>
<div id="header" style="background-image:url(uploads/header.jpg?_=<?php echo time(); ?>);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>
<?php } else { ?>
<div id="header"></div>
<?php } ?>
The time-stamp should just be ignored and the image will be downloaded each update.
Update
Ok, I see now that the background image is on the element you are replacing the HTML of. You could use jQuery to update the url() of the image:
success : function(data) {
var theDate = new Date();
$("#header").css('background-image', 'uploads/header.jpg?_=' + theDate.getTime()).html(data).fadeIn('fast');
}
You could also use PHP to output the #header element and use replaceWith() instead of .html():
success : function(data) {
$("#header").replaceWith(data).fadeIn('fast');
}
This assumes that your PHP output now looks like this:
<div id="header" style="background-image:url(uploads/header.jpg?_=1234567890);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>