Dynamic Variable Content JavaScript - javascript

<script>
function zeigeBildGross1(Bild1){
document.getElementById("Bild1").width = 500;
document.getElementById("Bild1").height = 300;
}
function zeigeBildGross2(Bild2){
document.getElementById("Bild1").width = 500;
document.getElementById("Bild1").height = 300;
}
function zeigeBildGross3(Bild3){
document.getElementById("Bild1").width = 500;
document.getElementById("Bild1").height = 300;
}
function zeigeBildGross4(Bild4){
document.getElementById("Bild1").width = 500;
document.getElementById("Bild1").height = 300;
}
</script>
<noscript>
Bitte JavaScript in Ihrem Browser aktivieren!
</noscript>
</head>
<body>
<img id="Bild1" width=300 height=200 onclick=zeigeBildGross(Bild1) src="http://getafteritsales.com/wp-content/uploads/2015/04/Brett-Zalaski-1.png" >
<img id="Bild2" width=300 height=200 onclick=zeigeBildGross(Bild2) src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Number_2_in_light_blue_rounded_square.svg/1024px-Number_2_in_light_blue_rounded_square.svg.png"><br>
<img id="Bild3" width=300 height=200 onclick=zeigeBildGross(Bild3) src="https://p3cdn2static.sharpschool.com/common/resources/images/Cliparts/Math/Number%203%20Violet.png">
<img id="Bild4" width=300 height=200 onclick=zeigeBildGross(Bild4) src="http://www.clker.com/cliparts/m/e/u/E/z/k/yellow-rounded-number-4-md.png"><br>
</body>
Hello,
I want to code a website using HTML and JS, where 4 pictures are shown.
If I press on one picture, it should be resized.
Is it possible, to get a "dynamic" variable?
My idea was, to get a new variable which can have the content Bild1, Bild2, Bild3 or Bild4, depending on which picture was pressed before so there's not the same function for each case just with a different word.
For example:
function zeigeBildGross(){
var x = <!-- depending on which pic was pressed either: Bild1, Bild2, Bild3 or Bild4 !-->
document.getElementById(x).width = 500;
document.getElementById(x).height = 300;
}
Is that possible?
Thank you for reading,
Stöger

Simply deliver the id of your image to the function:
HTML:
<img src="Bild1.jpg" id="Bild1" width="300" height="200" onclick="zeigeBildGross(this.id)">
Javascript:
function zeigeBildGross(id){
document.getElementById(id).width = 500;
document.getElementById(id).height = 300;
}
Cleaner version:
<img src="Bild1.jpg" id="Bild1" width="300" height="200" onclick="zeigeBildGross(this)">
Javascript:
function zeigeBildGross(bild){
bild.width = 500;
bild.height = 300;
}

You don't need to create a variable that contains the image being clicked, it already exists as the context in the onclick event handler.
Simply pass this as parameter to the function, and you can use that to access the element:
function zeigeBildGross(bild){
bild.width = 500;
bild.height = 300;
}
<img id="Bild1" width=300 height=200 onclick="zeigeBildGross(this)" src="http://getafteritsales.com/wp-content/uploads/2015/04/Brett-Zalaski-1.png" >
<img id="Bild2" width=300 height=200 onclick="zeigeBildGross(this)" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Number_2_in_light_blue_rounded_square.svg/1024px-Number_2_in_light_blue_rounded_square.svg.png"><br>
<img id="Bild3" width=300 height=200 onclick="zeigeBildGross(this)" src="https://p3cdn2static.sharpschool.com/common/resources/images/Cliparts/Math/Number%203%20Violet.png">
<img id="Bild4" width=300 height=200 onclick="zeigeBildGross(this)" src="http://www.clker.com/cliparts/m/e/u/E/z/k/yellow-rounded-number-4-md.png"><br>

Related

Problem with IF statement for DOM animation & effects with JQuery' assignment

I'm creating a simple slideshow, it's part of my 'DOM animation & effects with JQuery' assignment, focusing on JavaScript, HTML, CSS and jQuery.
The assignment is simple: Create a slideshow with 2 buttons (Prev & Next). When I click on the corresponding button it should take me to the next slide or the previous slide.
var $one = $(".one")
var $two = $(".two");
var $three = $(".three");
var $four = $(".four");
var $five = $(".five");
var $six = $(".six");
var $seven = $(".seven");
$two.hide();
$three.hide();
$four.hide();
$five.hide();
$six.hide();
$seven.hide();
$one.slideDown();
var $prev = $("prev");
var $next = $("next");
$next.on("click", function() {
if ($one.slideDown()) {
$one.hide();
$two.slideDown();
} else {
$one.slideDown();
}
});
$prev.on("submit", function() {
if ($one.slideDown()) {
$one.hide();
$six.slideDown();
} else {
$one.slideDown();
}
});
img {
border: 6px rgb(245, 166, 166) solid;
}
<img src="https://www.kasandbox.org/programming-images/food/mushroom.png" width="500" alt="Mushrooms" class="one">
<img src="https://www.kasandbox.org/programming-images/food/berries.png" width="500" alt="Berries" class="two">
<img src="https://www.kasandbox.org/programming-images/food/broccoli.png" width="500" alt="Broccoli" class="three">
<img src="https://www.kasandbox.org/programming-images/food/brussels-sprouts.png" width="400" alt="Sprouts" class="four">
<img src="https://www.kasandbox.org/programming-images/food/chocolates.png" width="500" alt="Chocolates" class="five">
<img src="https://www.kasandbox.org/programming-images/food/fruits.png" width="500" alt="Fruits" class="six">
<img src="https://www.kasandbox.org/programming-images/food/cake.png" width="500" alt="Cake" class="seven">
<button type="submit">⬅︎ Prev︎</button>
<button type="click">Next ➡</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
I've spent much time trying to figure out the best way to do this and then came up with the solution above, however the IF statement isn't working too well.
I'm not looking for the solution or straight up answer - just guidance, of where the problem is/hints on how to tackle it (also a link to a video that could give me a similar problem/walkthrough/tutorial would be greatly appreciated!).
Thanks for all your help!
Your code looks much better like this. There are a few edge cases but you should be able to handle them now.
What I did:
- Gave a slide class to the slider
- I add is-active class to the active slider
- Remove the is-active when button is clicked
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project: Interactive slideshow</title>
<style>
img {
border: 6px rgb(245, 166, 166) solid;
}
</style>
</head>
<body>
<br>
<img src="https://www.kasandbox.org/programming-images/food/mushroom.png" width="500" alt="Mushrooms" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/berries.png" width="500" alt="Berries" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/broccoli.png" width="500" alt="Broccoli" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/brussels-sprouts.png" width="400" alt="Sprouts" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/chocolates.png" width="500" alt="Chocolates" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/fruits.png" width="500" alt="Fruits" class="slide" >
<img src="https://www.kasandbox.org/programming-images/food/cake.png" width="500" alt="Cake" class="slide" >
<button class="prev">⬅︎ Prev︎</button>
<button class="next">Next ➡</button>
<script>
var slide = $(".slide")
slide.hide();
slide.first().show().addClass('is-active');
// slide.first().slideDown();
//variables
var prev = $(".prev");
var next = $(".next");
//Next button action
next.on("click", function() {
slide.hide();
$('.is-active').removeClass('is-active').next().addClass('is-active').show();
});
//Prev button action
prev.on("click", function() {
slide.hide();
$('.is-active').removeClass('is-active').prev().addClass('is-active').show();
});
</script>
</body>
</html>
NOTE: Please try avoiding classes like one, two, three so on. Because if there are like 1000 images you will not add 1000 lines of code because that will become a mess.

How to set timeout function for Rollover

Below is my code, this is basic question can anyone help to fix this,
I want image to appear after sometime when user hover on it. say for eg 3 sec
function MouseRollover(MyImage) {
MyImage.src = "http://www.blirk.net/wallpapers/800x600/universe-wallpaper-2.jpg";
}
function MouseOut(MyImage) {
MyImage.src = "https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg";
}
<div align="center">
<!--The rollover image displays here.-->
<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg" border="0px" width="" height="" onMouseOver="setTimeout(MouseRollover(this), 3000);" onMouseOut="MouseOut(this)" />
</div>
You can set the setTimeout inside the function so that it does not change the image source for 3 seconds like below. Although in this example if the user stops hovering before 3 seconds, then the onMouseOut will finish firing before the onMouseOver, which leaves the user with the hovered image.
<html>
<head>
<script language="javascript">
function MouseRollover(MyImage) {
setTimeout(function(){
MyImage.src = "http://media.giphy.com/media/DOs3KXoWEpTxK/giphy-tumblr.gif";
}, 3000);
}
function MouseOut(MyImage) {
MyImage.src = "http://plusquotes.com/images/quotes-img/cool_cat.jpg";
}
</script>
</head>
<body>
<div align="center">
<!--The rollover image displays here.-->
<img src="http://plusquotes.com/images/quotes-img/cool_cat.jpg"
border="0px"
width="300px" height="auto"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</div>
</body>
</html>
Ok, below is a script that will change the image 3 seconds after mousing over. I slightly modified your code as it's a lot easier to work with scripts when it's not embedded in your HTML. Hope this helps.
const universe = 'http://www.blirk.net/wallpapers/800x600/universe-wallpaper-2.jpg';
const rectangle = 'https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg';
const img = document.querySelector('img');
img.addEventListener('mouseover', (e) => {
setTimeout(()=>{
img.src = universe;
}, 3000);
})
<html>
<head>
</head>
<body>
<div align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg">
</div>
</body>
</html>
Here is an example, mouse over wait 3 seconds.
Also resets when mouse leaves..
var mrSmiley = document.querySelector('.img');
var timer;
mrSmiley.onmouseenter = function () {
timer = setTimeout(function () {
mrSmiley.classList.add('img-3sec');
}, 3000);
}
mrSmiley.onmouseleave = function () {
clearTimeout(timer);
mrSmiley.classList.remove('img-3sec');
}
.img {
cursor: pointer;
width: 128px;
height: 128px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 5.8208332 5.8208335"><defs><linearGradient gradientUnits="userSpaceOnUse" y2="537.87" x2="481.51" y1="547.94" x1="481.6" id="0"><stop stop-color="#ffeb96"/><stop offset="1" stop-color="#fff1b7"/></linearGradient></defs><g transform="matrix(.43294 0 0 .43294-205.62-231.99)"><circle cx="481.66" cy="542.55" r="5.5" fill="url(#0)"/><g transform="translate(-7.44.975)"><g fill="#414141"><circle r=".6" cy="542.3" cx="485.13"/><circle r=".6" cy="542.3" cx="491.15"/></g><path d="m486.66 544.18h2.912" fill="none" fill-rule="evenodd" stroke="#414141" stroke-linecap="round" stroke-width=".275"/></g></g></svg>');
}
.img-3sec {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 5.8208332 5.8208335"><defs><linearGradient id="0" x1="488.2" y1="547.74" x2="488.11" y2="537.68" gradientUnits="userSpaceOnUse"><stop stop-color="#ffeb96"/><stop offset="1" stop-color="#fff1b7"/></linearGradient></defs><g transform="translate(0-291.18)"><g transform="matrix(.43294 0 0 .43294-209.18 68.12)"><g transform="translate(1.612-20.413)"><circle r="5.5" cy="542.35" cx="488.27" fill="url(#0)"/><g fill="#414141"><circle cx="485.18" cy="542.3" r=".6"/><circle cx="491.35" cy="542.3" r=".6"/></g></g><g transform="translate(-6.818-.4)" fill="#f7aa86"><path d="m499.05 523.96c0 .07.783.139.779.207-.11 1.575-1.461 2.821-3.116 2.827-1.648.006-3.01-1.222-3.135-2.788-.006-.074.305-.15.304-.225l2.82-.022z"/><path d="m493.66 523.64h6.077c.049 0 .088.039.088.088v.385c0 .049-.001.206-.001.206h-6.234c0 0-.001-.157-.001-.206v-.385c0-.049.039-.088.088-.088"/></g></g><path d="m2.113 294.66h1.594v.769.773c0 .426-.343.769-.769.769h-.057c-.426 0-.769-.343-.769-.769v-.773z" fill="#eb8671" fill-rule="evenodd"/></g></svg>');
}
Mouse over Mr Happy for 3 seconds..
<div class="img">
</div>

Error html user tag canvas

I have a source code. I use tag canvas in code HTML. I have one tag div before 11 tag Canvas and two tag div behind tag canvas. When I run the code the error occurred.
If I set property of height for canvas < 50px then arrow hidden.
And if I don't set property of heigth of canvas. When I run the code, the display: tag div MISSSSS and MOMMMMM between tag canvas. Sorry I don't post image display because I do not has the right.
I want to MISSSSSS and MOMMMMMM behind canvas.
And I want set property of height for canvas = 30px don't hidden arrow.
Live example on the JSFiddle
HTML:
<div>LOLLL</div>
<div style="height:30px;">
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_1" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
</div>
<div>MISSSSSS</div>
<div>MOMMMM</div>
Javascript:
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
var t = setTimeout("resize()", 200);
else
resize();
function resize() {
var innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var targetWidth = 800;
var targetHeight = 600;
window.resizeBy(targetWidth-innerWidth, targetHeight-innerHeight);
}
function canvas_arrow(context, fromx, fromy, tox, toy){
var headlen = 20; // length of head in pixels
var dx = tox-fromx;
var dy = toy-fromy;
var angle = Math.atan2(dy,dx);
context.moveTo(fromx, fromy);
context.lineTo(tox, toy);
context.lineWidth=2;
//context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
context.moveTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
context.moveTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
}
$('document').ready(function(){
var count= parseInt($("canvas").length);
for(var i=0; i< count; i++){
var ctx= $("canvas")[i].getContext('2d');
var temp= $("canvas")[i].id;
if(temp.indexOf("text") != -1){
ctx.font="15px Times New Roman";
ctx.fillText("I Love My Mom",10,10);
}
else{
if(temp.indexOf("arrow") != -1){
ctx.beginPath();
canvas_arrow(ctx,10,10,100,10);
ctx.stroke();
}
}
}
});
I'm confused about what your goal is, but try overflow:hidden; in addition to height: 30px;
https://jsfiddle.net/9j7vx5dz/2/

Place Div on top of video using javascript

I have several kinds of videos, like this
<video id='abd' height="200" width="200" ></video>
<embed id='bcd' height="200" width="200" ></embed>
<object id='cde' height="200" width="200" ></object>
I have calculated target position like this
<script>
var vid=document.getElementById('abd');
var width = vid.offsetWidth;
var height = vid.height;
var x = width/2+ 'px';
var y = height - 12+'px';
var div = '<div>Heloo</div>';
</script>
Now i want to put a div at position (x,y).
How can i do this. div is stored in var div, Is there any way to do this perfectly,
Your help will be greatful
Thanks
You can do this using pure CSS - no JS required!
The HTML
<div id="video-container">
<iframe width="420" height="315" src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen> </iframe>
<div class="video-overlay">
Overay Content
</div>
</div>
The CSS
#video-container {
position:relative;
width:420px;
}
.video-overlay {
position:absolute;
top:50px;
right:50px;
background:#000;
color:#FFF;
}
See it in action
http://jsfiddle.net/y28Zs/
try this
http://jsfiddle.net/miquelcamps/BJN8x/3/
html
<video id="embed" width="200" height="200" controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
javascript
var vid = document.getElementById('embed');
var width = vid.width;
var height = vid.height;
var x = vid.offsetLeft;
var y = vid.offsetTop;
var div = '<div class="overlay" style="height:'+height+'px;width:'+width+'px;left:'+x+'px;top:'+y+'px;">Hello</div>';
document.body.innerHTML += div;
css
.overlay{
position:absolute;
background:red;
z-index:99;
}
Please check is it what you want :
<div id="adds">
<video id='abd' height="200" width="200" style="border:2px solid" ></video>
</div>
Javascript ----
vid=document.getElementById('abd');
addDiv =document.getElementById('adds');
var width = vid.offsetWidth;
var height = vid.height;
var x = width/2+ 'px';
var y = height - 12+'px';
var newDiv = document.createElement("div");
newDiv.innerText = "Hello....";
newDiv.style.left = "102px";
newDiv.style.top = "108px";
newDiv.style.position = "absolute";
addDiv.appendChild(newDiv);
Live demo : (http://jsfiddle.net/7EhtL/)

On-Click img border = #color - Multiple images - Only need 1 highlighted at a time

Basically what I am trying to accomplish is create a list of images (let's say 10) and upon clicking any of these images, their border changes to a specific color; currently accomplishing this with a simple onClick event with JS. That's not an issue. The trouble comes in when clicking a second or third or forth image; all of the images clicked remain highlighted, of course. I would like to set it so that only the last (current) image selected in the set remain with the border color changed.
What is the best way to accomplish this simple effect?
Below is a simple working example:
<!doctype html>
<html>
<head>
<title>Website.com</title>
<style type="text/css">
.normal {
border:none;
}
.highlighted {
border:1px solid #336699;
}
</style>
<script type="text/javascript">
var ImageSelector = function() {
var imgs = null;
var selImg = null;
return {
addImages: function(container) {
imgs = container.getElementsByTagName("img");
for(var i = 0, len = imgs.length; i < len; i++) {
var img = imgs[i];
img.className = "normal";
img.onclick = function() {
if(selImg) {
selImg.className = "normal";
}
this.className = "highlighted";
selImg = this;
};
}
}
};
}();
</script>
</head>
<body>
<div>
<div id="menu">
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
<img src="cube.png" width="30" height="30" />
</div>
</div>
<script type="text/javascript">
var div = document.getElementById("menu");
ImageSelector.addImages(div);
</script>
</body>
</html>
This does not use any library such as jQuery. Its just plain 'ol js. Also the code is for the sake of example
I would take advantage of jQuery. Give each of your images a class, for example, "imageHighlight" or something. Then you could do something like this (completely untested):
$(document).ready(function() {
$('img.imageHighlight').click(function() {
$('img.imageHighlight').css('border-width', 0);
$(this).css('border-width', '3px');
});
});
And have some CSS with it:
img.imageHighlight {
border: 0px solid #345678;
}
There's probably even a better way to do it by toggling CSS classes or something, but I'm lazy at the moment. Still digesting lunch :)

Categories

Resources