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.
Related
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.
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>
How to produce all this code into a div element using JavaScript.
<div id=parentDiv>
<div id="question1">
QuestionNo 1
<button onclick="setOption(1,1)">A</button>
<button onclick="setOption(1,2)">B</button>
</div>
</div>
I want to insert the div question1 'n' number of times with ids as question2, question3 also the the parameters for calling the function setOption should be like setOption(i,1), setOption(i,2) for every questioni.
I have tried using this.
var paper = document.getElementById("paper");
for (i = 1; i <= NOQ; i++) {
paper.innerHTML += '<div id="question' + i + '">'
var element = document.getElementById("question" + i);
element.innerHTML += 'QuestionNo ' + i + ' :';
element.innerHTML += '<button onclick="setOption(' + i + ',1)">A</button>';
element.innerHTML += '<button onclick="setOption(' + i + ',2)">B</button>';
}
However, this method takes a lot of time when value of n goes more than 200 or so, which makes me think of a loading screen. But the problem is all the n element are banged on the screen at once and not one by one, and same happens with my loading screen. The loading screen is also banged with the other elements at the end of the process.
My questions are, Is this method legal at all? Why is this taking so much amount of time? Is the appendchild method better than this (if yes can someone help me how to insert all this using append child method)? How can i show a loading screen showing progress as each element loads?
I've fixed a few errors but you get general idea.
var paper = document.getElementById("paper");
for(i=1; i<=NOQ; i++){
paper.innerHTML+='<div id="question'+i+'"></div>'
var element = document.getElementById("question" + i);
element.innerHTML='QuestionNo '+i+' :<button onclick="setOption('+i+',1)">A</button><button onclick="setOption('+i+',2)">B</button>';
}
This shouldn't take long to load.
If you are getting long load times, consider pagination.
Check this code:
HTML
<div id=parentDiv>
<div id="question1">
<script>
fn_generate(10);//give any no. in place of 10 i.e. the no of qstns you want.
</script>
</div>
</div>
JavaScript
fn_generate=function(n)
{
for (i=1; i<=n; i++)
{
document.write("QuestionNo " + i);
for(j=1; j<=2; j++)
document.write("<button onclick='setOption("+i+","+j+")'>Ans" + j + "</button>");
document.write("<br>");
}
}
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 + "/>";
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.