I am using the flexslider plugin which is triggered by the following code:
$(window).on('load', function () {
$('.flexslider').flexslider();
});
This runs once the page has loaded. Later in the application I've replaced the contents of the flexslider (the number of images in it and their sources) and need to re-load the flexslider.
My code is as follows:
document.getElementById('contestant1').onclick = function() {
process();
}
output = "";
for (num=1; num<=3; num++) {
imagesource = "Week" + num + "/Antony.png";
output = output + "<li> <img src=" + imagesource + " /> </li>";
}
document.getElementById('images').innerHTML = output;
console.log(output);
$('.flexslider').flexslider();
Please tell me how to force the flexslider to re-load. Here is a link to the full application, however it has a few more complex elements not relevant to the problem:
http://eg-graphics.com/zwooper/EGVGV/Season2/MemoryWall.html
Figured out a fix:
Added the line:
$('#flexslider').removeData("flexslider");
before this one: $('.flexslider').flexslider();
Runs like a dream
You can revmove the older flexslide and reinit it.
output = "";
for (num=1; num<=3; num++) {
imagesource = "Week" + num + "/Antony.png";
output = output + "<li> <img src=" + imagesource + " /> </li>";
}
var images = $("#images").append(output);
console.log(output);
$(".flexslider").remove();
$(".Your-flexslider-container").append("<div class='flexslider'></div>");
$(".flexslider").html(images);
$('.flexslider').flexslider();
Is it an example because i dont now how is your html flexslider .Try to make this code work for you.
Related
I'm using blogger as my blogging platform. In my blog homepage, I create a function to grab all images from single post for each post (there are 5 posts in my homepage), then append all images from single post to single slider, for each post.
This is my function script (I place it after <body> tag):
<script type='text/javascript'>
//<![CDATA[
function stripTags(s, n) {
return s.replace(/<.*?>/ig, "")
.split(/\s+/)
.slice(0, n - 1)
.join(" ")
}
function rm(a) {
var p = document.getElementById(a);
img = p.getElementsByTagName("img").each( function(){
$(".flexslider .slides").append($("<li>").append(this));
});
p.innerHTML = '<div class="entry-container"><div class="entry-content"><div class="entry-image"><div class='flexslider'><ul class='slides'></ul></div></div><div class="entry-header"><h1>' + x + '</h1></div><p>' + stripTags(p.innerHTML, SNIPPET_COUNT) + '</p></div></div>'
}
//]]>
</script>
Then my variable, each post have single variable, different for each post based on it's ID:
<script type='text/javascript'>var x="Post Title",y="http://myblog.url/post-url.html";rm("p8304387062855771110")
My single post markup:
<span id='p8304387062855771110'></span>
The problem is, the append function in my script not work. Am I forget something in my code?
Your jQuery/JavaScript is very ropey. There is no method each on a nodelist. Try not to mix jQuery/JavaScript up so much. And you might consider using a array/join on the html you want to insert to keep the line length readable. That way you might have noticed that your HTML quotes were not consistent.1
var $p = $('#' + a);
$p.find('img').each(function () {
var html = $('<li>').append($(this))
$('.flexslider .slides').append(html);
});
var html = [
'<div class="entry-container"><div class="entry-content">',
'<div class="entry-image"><div class="flexslider">',
'<ul class="slides"></ul></div></div><div class="entry-header">',
'<h1><a href="',
y,
'">',
x,
'</a></h1></div><p>',
stripTags(p.innerHTML, SNIPPET_COUNT),
'</p></div></div>'
].join('');
$p.html(html);
1 Personally I prefer single quotes for JS work and double quotes for HTML attributes and never the twain shall meet.
I think <li> doesnt work try li like this:
$(".flexslider .slides").append($("li").append(this));
You could get rid of type="text/javascript" and //<![CDATA[, it is 2014, after all ;-)
Also, .*? is not what you mean.
<script>
function stripTags(s, n) {
return s.replace(/<[^>]*>/g, "") // Be careful with .*? : it is not correct
.split(/\s+/)
.slice(0, n - 1)
.join(" ")
}
function rm(id) {
var $p = $('#' + id);
img = $p.find("img").each( function(){
$(".flexslider .slides").append($("<li>").append(this));
});
p.innerHTML = '<div class="entry-container"><div class="entry-content"><div class="entry-image"><div class="flexslider"><ul class="slides"></ul></div></div><div class="entry-header"><h1>' + x + '</h1></div><p>' + stripTags(p.innerHTML, SNIPPET_COUNT) + '</p></div></div>'
}
</script>
I am using javascript to show images .I have 5 images but unable to display them.My code is as follows:
function set()
{
var i;
for(i=1; i<=5; i++)
{
var image = "<img src=images/sl + i + />";
document.getElementById('slider').innerHTML = image;
}
}
setInterval("set()","500");
<div id="slider">
<img src="images/sl1.jpg" />
</div>
Change -
var image = "<img src=images/sl + i + />";
To -
var image = "<img src=images/sl" + i + "/>";
Also I believe you need to append image format in this too(jpg | png etc)
EDIT --
var image = "<img src=images/sl" + i +".jpg"+" style='width:500px;height:300px;' />";
You're always putting the same image right now, the one of end of loop. I can propose this code :
var i = 0;
function set(){
var image = "<img src=images/sl" + i + "/>";
document.getElementById('slider').innerHTML = image;
i = (i+1)%5;
}
setInterval(set, 500);
I fixed a few other bugs/problems. Never pass a string as first argument to setInterval, pass the name of the function or a function expression. And the second needed argument is a number, it doesn't make sense to pass a string literal.
But it would have been cleaner to define the img element in the HTML part of your code and just change the src property instead of the whole slide inner HTML. It would also tell to the browser to change the display only after the image has been loaded.
Assuming that the filenames of the images aresl1, sl2,..., sl5 , it should be
var image = "<img src=images/sl"+i+"/>";
Try this:
function set()
{
var i;
for(i=1; i<=5; i++)
{
var image = "<img src='images/sl" + i + "'/>";
document.getElementById('slider').innerHTML = image;
}
}
setInterval("set()","500");
<div id="slider">
<img src="images/sl1.jpg" />
</div>
Your ' i ' variable is part of your string, you need:
var image = "<img src=images/sl" + i + "/>";
My jQuery code to Get XML data is not working in IE 7 or IE 8, it works in IE9 and everything else. I am not sure why this would be happening. Any help is greatly appreciated! I am working in Drupal so I am using jQuery instead of the $ sign. I am also very new to programming, so any advice is wonderful.
jQuery(document).ready(function() {
jQuery.get('/xml/designs.xml',function(data){
jQuery(data).find('slide').each(function(){
var slide = jQuery(this);
var caption = slide.find('caption').text();
var source = slide.find('source').text()
var html = '<li class="mySlides"><a href="' + caption + '_Letterpress_Wedding_Invitation"><img src="/sites/aerialist.localhost/files/images/selectThumbs/' + source + '.jpg"/><p>' + caption + '</p><a>';
var htmlPad = '<li class="mySlides"><a href="' + caption + '_Letterpress_Wedding_Invitation"><img src="/sites/aerialist.localhost/files/images/selectThumbs/' + source + '600.jpg"/><p>' + caption + '</p><a>';
if (window.devicePixelRatio > 1) {
jQuery('#list').append(htmlPad);
jQuery('#list').hide();
jQuery('#list').fadeIn(800);
} else {
jQuery('#list').append(html);
jQuery('#list').hide();
jQuery('#list').fadeIn(800);
}
});
return false;
})
});
As charlietfl said, the problem is invalid HTML, but the problem is not the unclosed <li> (it's valid HTML, <li>-elements don't need to be closed), the problem are the <a>'s at the end of html and htmlPad, they have to be </a>
Hello friends here's my code
function dropItems(idOfDraggedItem,targetId,x,y)
{
var html = document.getElementById('dropContent').innerHTML;
if(html.length<=0){
html.innerHTML='<img src="images/drag.jpg" alt=" " />'
}
if(html.length>0)html = html + '<br>';
html = html + document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('dropContent').innerHTML = html;
}
I want to to show a image in div when its empty.. but when it receive any data i want to remove that image by using this script .but its not working plz help me
function dropItems(idOfDraggedItem,targetId,x,y)
{
html = document.getElementById('dropContent');
if(html.innerHTML.length<=0){
html.innerHTML='<img src="images/drag.jpg" alt=" " />'
}
if(html.innerHTML.length>0)html = html + '<br>';
html = html + document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('dropContent').innerHTML = html;
}
function dropItems(idOfDraggedItem,targetId,x,y)
{
var html = document.getElementById('dropContent');
if(html.innerHTML.length<=0){
html.innerHTML='<img src="images/drag.jpg" alt=" " />'
}
if(html.innerHTML.length>0)html+='<br>';
html += document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('dropContent').innerHTML = html;
}
var html = document.getElementById('dropContent').innerHTML;
Here your passing the value to 'html'. not the reference of 'dropContent'. So you can't call 'innerHTML' on variables.
//Modified code
function dropItems(idOfDraggedItem,targetId,x,y)
{
var html = document.getElementById('dropContent').innerHTML;
if(html.length<=0){
html = '<img src="images/drag.jpg" alt=" " />'
}
if(html.length>0)html = html + '<br>';
html = html + document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('dropContent').innerHTML = html;
}
The problem is that the dropContent may not be empty even if it shows nothing; because, Javascript does not ignore the White-Spacing so there may be a white-space that keep the length bigger than zero.
Here is the solution, using the jQuery library as it has the needed methods to Trim the contents and other things:
function dropItems(idOfDraggedItem, targetId, x, y) {
var html = $("#dropContent").html();
html = $.trim(html);
if (html.length <= 0) {
var imageContent = $('<img src="images/drag.jpg" alt="" /><br />' + $("#" + idOfDraggedItem).html());
$("#dropContent").html(imageContent);
}
}
It worked for me in a test page I created.
The first line gets the html out of the element, second line trims it and thirth line checks if it is empty.
Forth line creates an element with the html string and the html content of the idOfDraggedItem element.
Fifth line sets the html content of the dropContent to the html content of the recently created element.
That's it.
Hope this works for you too.
PS the .html() method of jQuery extracts the innerHtml of the element, if you want the outerHtml, wrap the element in a div and get the .html() from div to get the outHtml of the wrapped element.
I'm using a script to scroll through images in an iframe. I can't figure out how to get the script to start on image 1 rather than start blank and then go to image 1.
Here is the script:
<script type="text/javascript">
var limit = 8;
var i = limit - 1;
function image_onclick(direction)
{
i = ( i + ( (direction == 'prev')?limit-1:1 ) ) % limit;
document.getElementById('image_box').innerHTML = '<img src=images/gallery/image' + (i+1) + '.jpg>';
}
</script>
This is the script in the body,
<div id="leaf1"><button onClick="image_onclick('prev');"><img src="images/leaf.gif" alt="leaf arrow" border="0"/></button></div>
<div id="image_box"></div>
<div id="leaf2"><button onClick="image_onclick('next');"><img src="images/leaf2.gif" alt="leaf arrow" border="0"/></button></div>
Use window.load or document.ready method and add following code to it.
document.getElementById('image_box').innerHTML = '<img src=images/gallery/image1'.jpg>';
Or simply on page
<script language="JavaScript">
document.getElementById('image_box').innerHTML = '<img src=images/gallery/image1'.jpg>';
</script>
Why not put
document.getElementById('image_box').innerHTML = '<img src=images/gallery/image' + (1) + '.jpg>';
in a document.ready call?
Aren't you missing the inner quotes?
= '<img src=images/gallery/image' + (i+1) + '.jpg>';
vs
= "<img src='images/gallery/image" + (i+1) + ".jpg' >";
add onload="image_onclick('next')" to your body tag.
Unless there's a reason to load the initial image dynamically, why not just put the initial image inside the <div>. Using scripting for such a simple task seems overhead.
You can just call image_onclick('next') on document.ready.