I want to remove the script which i wrote that nakes the use of the class i.e. UiUx3DSSVFlow. Without hardcoding this internal class, how to make use of their parent #thumbs?
I should not any more make use of the specific classes in my script. In the future those classes could change to any other class name. I need the same functionality in another way without using the internal class names
HTML:
<!--Thumbs Image-->
<div id="thumbs">
<div class="UiUx3DSSVFlow">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div class="UiUx3DSSVFlow">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div id="Video" class="UiUx3DSSVFlow">
<div class="video_gallery">
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
</div>
<div id="Video" class="UiUx3DSSVFlow">
<div class="video_gallery">
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
</div>
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>
CSS:
#thumbs{
border:1px solid red;
width:100%;
}
#thumbs div{display:inline-block; }
#larger{
border:1px solid black;
width:100%;
}
#larger div{display:inline-block; }
jQuery:
function thumbs(i,incr){
var num_thumbs=2;
if(i===null){
i=$("#thumbs").prop('data-index'),
i+=num_thumbs*incr;
}
i=Math.max(1,Math.min(i,$('#thumbs .UiUx3DSSVFlow').length-num_thumbs+1));
$("#thumbs").prop('data-index',i);
$('#thumbs .UiUx3DSSVFlow').hide();
$('#thumbs .UiUx3DSSVFlow:nth-child(n+'+i+'):nth-child(-n+'+Number(i+num_thumbs-1)+')').show();
}
$("#thumbs").prop('data-index',1);
$([['next',1],['prev',-1]]).each(function(){
var that=this;
$('.t'+that[0]).click(function(){
thumbs(null,that[1]);
});
});
$('.tprev').click();
http://jsfiddle.net/T657N/33/
jsFiddle demo
review your HTML, CSS knowledge before jumping into JS!
You cannot have multiple ID inside one document!
A div element (as it's by default a block element) does not need the width:100%;
display: inline-block is best suitable and xbrowser for <span> elements, for other browsers you'll need to use some sort of hax like:
display:inline-block;
*display:inline;
zoom:1;
HTML:
<div id="thumbs">
<div>
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>
CSS:
#thumbs{border:1px solid red;}
#thumbs div{display:inline;}
jQuery:
var $tDiv = $('#thumbs div');
var tDivsN = $tDiv.length;
var c = 0;
function display(){
c= c===-1? tDivsN-1 : c%tDivsN;
$tDiv.hide().eq(c).show();
}
display();
$('.tprev, .tnext').on('click',function(e){
e.preventDefault();
var myCLass= $(this).hasClass('tnext') ? c++ : c--;
display();
});
Related
I'm attempting to create a page that will allow me to select from a series of images, with the option of choosing your own via URL, but I have stumbled on an issue. I am attempting to use buttons placed under the sample images to change the source image that is piped into a function, but I can't seem to get it to work. Here is my code:
<html>
<head>
<script>
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.drawImage(imageUsed,0,0,500,500);
}
</script>
<style>
#header
{
background-color:brown;
color:black;
text-align:center;
padding:5px;
}
#defaultSelection
{
line-height:30px;
background-color:#eeeeee;
width:200px;
float:left;
padding:5px;
text-align:center;
}
#canvasID
{
background-color:grey;
width:1000px;
float:left;
padding:10px;
text-align:center;
}
</style>
</head>
<body">
<div id="header">
<h1> Welcome</h1>
<h2>Please select an image, or upload your own below.</h2>
</div>
<div id="defaultSelection">
<img id="Image1" src="Image1.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage(Image1)">Use this image</button>
<br>
<img id="Image2" src="Image2.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage(Image2)">Use this image</button>
<br>
<img id="Image3" src="Image3.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage()">Use this image</button>
<br>
<img id="Image4" src="Image4.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage()">Use this image</button>
</div>
<div id="canvasID">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3; background-color:white;">
</canvas>
</div>
</body>
</html>
Does anyone know why it might not be passing the images through? They display correctly on the page, so I know the source is correct, but they don't seem to want to be passed to the function.
Try updating your javascript function to:
function updateImage(imageUsed) {
var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d"),
image = document.getElementById(imageUsed);
ctx.drawImage(image,0,0,500,500);
}
Then output your buttons like:
<button onclick="updateImage('Image1')">Use this image</button>
You need to pass the ID of the element as a string
<button onclick="updateImage('Image1')">Use this image</button>
and in updateImage method you need get the image object from the passed ID
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
**imageUsed = document.getElementById(imageUsed);**
var ctx = c.getContext("2d");
ctx.drawImage(imageUsed,0,0,500,500);
}
Here is the full working code
<html>
<head>
<script>
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
imageUsed = document.getElementById(imageUsed);
var ctx = c.getContext("2d");
ctx.drawImage(imageUsed,0,0,500,500);
}
</script>
<style>
#header
{
background-color:brown;
color:black;
text-align:center;
padding:5px;
}
#defaultSelection
{
line-height:30px;
background-color:#eeeeee;
width:200px;
float:left;
padding:5px;
text-align:center;
}
#canvasID
{
background-color:grey;
width:1000px;
float:left;
padding:10px;
text-align:center;
}
</style>
</head>
<body">
<div id="header">
<h1> Welcome</h1>
<h2>Please select an image, or upload your own below.</h2>
</div>
<div id="defaultSelection">
<img id="Image1" src="Image1.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image1')">Use this image</button>
<br>
<img id="Image2" src="Image2.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image2')">Use this image</button>
<br>
<img id="Image3" src="Image3.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image3')">Use this image</button>
<br>
<img id="Image4" src="Image4.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image4')">Use this image</button>
</div>
<div id="canvasID">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3; background-color:white;">
</canvas>
</div>
</body>
</html>
I think you need to load the image, so it can find the URL
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById(imageUsed);
ctx.drawImage(img,0,0,500,500);
}
I've a next button and back button. I want to show one question div at a time. Then I want next button to change the div to the next div question and the back button should change the div back to the previous div. Only one div should be seen at a time.
<input type="image" src="forward.gif" alt="Next">
<input type="image" src="back.gif" alt="Back">
<div class="question_one">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
Here's a simple JavaScript which solves this kind of problem:
<script>
var next = document.getElementById('next'),
back = document.getElementById('back'),
questions = document.getElementsByTagName('div'),
current = 0;
next.onclick = function showNext() {
if (questions[current+1]) {
questions[current].style.display = 'none';
questions[current+1].style.display = 'block';
current++;
} else {
return false;
}
}
back.onclick = function showPrev() {
if (questions[current-1]) {
questions[current].style.display = 'none';
questions[current-1].style.display = 'block';
current--;
} else {
return false;
}
}
</script>
And at first you should hide the questions with CSS (except the first one):
<style>
div:not(:first-of-type) {
display: none;
}
</style>
EDIT: here is your HTML...
<input type="image" src="forward.gif" alt="Next" id="next">
<input type="image" src="back.gif" alt="Back" id="back">
<div class="question_one">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
First, regroup your class with unique name and add id to your back and forward button (To apply clicks events). Example :
<input type="image" src="forward.gif" alt="Next" id="forwardQ">
<input type="image" src="back.gif" alt="Back" id="nextQ">
<div class="question">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
With JQuery:
var actual = 0; // select by default the first question
$(document).ready(function() {
var number_of_question = $('.question').length; // get number of questions
$('.question:gt(' + actual + ')').hide(); // Hide unselect question
$('#nextQ').click(function() {
if(actual < number_of_question - 1 ) {
changeQuestion(actual + 1); // display select question
}
});
$('#forwardQ').click(function() {
if(actual) {
changeQuestion(actual - 1); // display select question
}
});
});
function changeQuestion( newQuestion ) {
$('.question:eq(' + actual +')').hide(); // hide current question
$('.question:eq(' + newQuestion +')').show(); // show new question
actual = newQuestion; // memorize actual selection
}
You can achieve this by combining HTML, CSS and jQuery.
In the below example I am displaying only the div elements with class active and hiding the other divs. And adding the class active to appropriate divs when ever the user clicks on the Next or Previous button.
HTML Code
<input type="button" value="Next" id="next_qs">
<input type="button" value="Back" id="prev_qs">
<div class="question_one">
QS1
</div>
<div class="question_two">
QS2
</div>
<div class="question_three">
QS3
</div>
<div class="question_four">
QS4
</div>
CSS Code
div {
width: 300px; height: 200px; border: 1px solid #333; clear: both; display: none;
}
div.active {
display: block;
}
jQuery Code
$("div:first").addClass('active')
$("#next_qs").click(function() {
$("div.active").removeClass('active').next().addClass('active');
});
$("#prev_qs").click(function() {
$("div.active").removeClass('active').prev().addClass('active');
});
http://jsfiddle.net/27gwy14f/
HTML
<div id="container">
<input type="image" src="back.gif" alt="Back">
<input type="image" src="forward.gif" alt="Next">
<div class="question_one question active">
1
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two question">
2
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three question ">
3
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four question">
4
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
</div>
Jquery
<script>
var $container = $("#container") // caches the jquery object
$container.find('input[alt="Next"]').on("click",function(){
var active = $container.find(".active")
if(active.next(".question").length === 0){
return false
}else{
active.removeClass("active")
active.next(".question").addClass("active")
}
})
$container.find('input[alt="Back"]').on("click",function(){
var active = $container.find(".active")
if(active.prev(".question").length === 0){
return false
}else{
active.removeClass("active")
active.prev(".question").addClass("active")
}
})
</script>
CSS
<style>
#container .question{
display:none
}
#container .active{
display:inline-block;
}
</style>
JS FIDDLE
http://jsfiddle.net/vrnxL9n8/
edit: added js fiddle link
I m trying to display list of images in div. for it I float it in left but after floating left it leave a lot of space and not display inline. can you help
snap shot is
and my html code is
<div class="col75">
<div class="col20">
<img src="images/saari1.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari2.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari3.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari4.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari5.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari1.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari2.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari3.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari4.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari5.jpg" width="100%" />
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
and my css code is
.col20 {
width: 17.5%;
float: left;
margin: 1%;
border: 1px solid #f5f5f5;
background: #e5e5e5;
}
.clear {
clear:both;
}
Please help me how it solve it. I want my all images just like my first row inline
you may consider using display:inline-block instead of float:left
e.g.
.col75 {
font-size:0px;
}
.col75 > div {
display:inline-block;
font-size:12px; // for expample
vertical-align: baseline !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:1% 1% 0 0; // you may consider using px instead of %
border:1px solid #f5f5f5;
background:#e5e5e5;
}
If you take a deep look you can see that not all images have same height and the problem is starting where is an image taller than the other ones :
You can check this fiddle. On .col20 i put a fixed height and overflow:hidden; and now everything is ok, but on some resolutions you could have some issues.
Another way is to use masonry, but according to this is unuseful.
If I were you, I would try to get all images on same sizes (width/height) ( from back-end, php or whatever ), or if is just some simple html, to slice all of them with same dimensions.
HTML :
<html>
<head>
<script>pushImages();</script>
<title>Float Image Gallery</title>
</head>
<body>
<button onclick="showAllGalleries();">Show gallery</button>
<div class="gallery">
<div class="gallery-close">
<a href=#><img class="gallery-close-button" src="http://bit.do/closeicon" onclick="hideAllGalleries();" /></a>
</div>
<div class="gallery-content">
<!-- Whenever need to add a image, add this code :
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
-->
<!--
Information :
When adding photo that is not 1:1, it will force shrink to 1:1.
-->
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
</div>
</div>
</body>
</html>
CSS :
<style>
.gallery {
display:none;
width:100%;
height:100%;
left:0;
bottom:0;
top:auto;
right:auto;
position:fixed;
background-color:#cccccc;
opacity:50%;
overflow-y: scroll;
}
.gallery-close {
width:auto;
height:auto;
margin-top:10px;
margin-left:10px;
}
.gallery-close-button {
width:30px;
height:30px;
}
.gallery-content {
width:100%;
height:auto;
text-align:center;
}
.gallery-content-image {
width:20%;
height:100%;
opacity:0.6;
filter:alpha(opacity=60);
}
.gallery-content-image:hover {
background-color:#ffffff;
opacity:1.0;
filter:alpha(opacity=100);
}
.gallery-image-cell {
width: 100%;
height: 0;
padding-bottom: 20%;
margin-left: auto;
margin-right: auto;
}
</style>
Javascript :
<script tyep="text/javascript">
function showAllGalleries(){
var adsArray = document.getElementsByClassName("gallery");
for (var i = 0; i<adsArray.length; i++){
adsArray[i].style.display='inline';
}
}
function hideAllGalleries(){
var adsArray = document.getElementsByClassName("gallery");
for (var i = 0; i<adsArray.length; i++){
adsArray[i].style.display='none';
}
}
function pushImages(){
var imageArray = document.getElementsByClassName("gallery-content-image")
var imageLinkArray[];
imageLinkArray.push("http://www.catchannel.com/images/feral-cats-birds.jpg");
imageLinkArray.push("http://www.catchannel.com/images/orange-tabbies.jpg");
imageLinkArray.push("http://thenypost.files.wordpress.com/2013/08/tiger132056-300x300.jpg");
imageLinkArray.push("http://bioexpedition.com/wp-content/uploads/2012/06/Indochinese-Tiger-picture.jpg");
imageLinkArray.push("http://www.east-northamptonshire.gov.uk/images/Dog_2.jpg");
imageLinkArray.push("http://www.pet365.co.uk/product_images/r/008/dd_black_with_dog__41452_zoom.jpg");
imageLinkArray.push("http://www.texasbirds.info/backyard/images/mountain_bluebird2_male.jpg");
imageLinkArray.push("http://www.honolulumagazine.com/images/2013/Oct13/Print/Bird_Fairy.jpg");
/*Use imageLinkArray.push("") to add a image; Add enough image.*/
for (var i=0; i<imageArray.length; i++){
imageArray[i].src = imageLinkArray[i];
}
}
</script>
I'm not sure where the problem is, but after clicking the button nothing happened.
Please help. Any help will be appreciated. Thank you.
<script>pushImages();</script>
This is calling a function before the DOM is even loaded, which should throw an error in your console. Place it at the bottom of your code or wrap it in window.onload = function() { .... }.
You're also missing an equal sign in this line: var imageLinkArray[]; (should be var imageLinkArray = [];.
I also suggest not practicing inline scripting. It's bad practice to do so. Try adding an event handler to the body (onclick only supports one event handler).
document.getElementsByTagName("body")[0].addEventListener("load", showAllGalleries, false);
i want to get box index number using Javascript. like i have four box so i want each box text have this appropriate number.
<head>
<script type="text/javascript">
function () {
var Main= document.getElementById('container').getElementsByTagName('div');
for(i=0; i<Main.length;i++){
}
}
</script>
<style>
.box {
float:left;
margin-left:20px;
position:relative
}
.width {
position:absolute;
left:0;
top:0;
color:#FFF;
font-size:20px;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<img src="img/sample1.jpg" height="200" width="300" />
</div>
<div class="box">
<img src="img/sample2.jpg" height="200" width="350" />
</div>
<div class="box">
<img src="img/sample3.jpg" height="200" width="150" />
</div>
<div class="box">
<img src="img/sample4.jpg" height="200" width="100" />
</div>
</div>
</body>
window.onload=function() {
var Main= document.getElementById('container').getElementsByTagName('div');
for(var i=0; i<Main.length;i++){
Main[i].innerHTML+= '<span class="title">box '+(i+1)+'</span>';
}
}
DEMO
Replace all your JS with this below and place the script tag as the last tag in your body tag to assure the DOM is ready when this is called. You could also call this function from the onload event.
(function(){
var Main= document.getElementById('container').getElementsByTagName('div');
for(var i=0; i<Main.length;i++){
Main[i].innerHTML += "box"+i;
}
})();
http://jsfiddle.net/mmjW9/