Changing images by clicking links - Javascript - javascript

I have tried to create a simple JavaScript which was supposed to switch images when links are clicked. This is the code of the whole site (It's not much, but it was only meant to be a test):
<html>
<head>
<title>Slideshow</title>
<style type="text/css">
#wrapper {
width: 800px;
height: 250px;
margin: 75px auto auto auto;
}
</style>
<script type="text/javascript">
function changeImg(x) {
document.getElementById(presentationImg).src='x';
}
</script>
</head>
<body>
<div id="wrapper">
<div id="mainnav">
<ul>
<li>Design</li>
<li>Realisation</li>
<li>Deployment</li>
</ul>
</div>
<div id="presentation">
<img id="presentationImg" src="design.jpg" />
</div>
</div>
</body>
I was pretty sure it would work, but it doesn't, and I have no idea why... does anyone know why, and what the solution is?

Get rid of the quotes around x in your function, and quote the element ID instead:
document.getElementById("presentationImg").src = x;
You will also need to quote the string you pass in to your function:
<a href="#" onclick="changeImg('design.jpg')">
The way you have it currently, presentationImg will be undefined, as you haven't declared a variable of that name. To make it work the way you had it originally you could do this:
var presentationImg = "presentationImg";
document.getElementById(presentationImg).src = x;

Related

Image is not capturing correctly in dropdown icon using html2canvas

I m having following code to convert image using html2canvas. It is working fine but the select tag icon (down arrow) is not coming when capture the image
<!DOCTYPE html>
<html>
<head>
<title>html2canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<style>
button{
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
.icon-diamond:before {
content: "\e943";
}
</style>
</head>
<body>
<div id="target">
<div style="position:relative;" class="noteclasscontainer" >
<span style="font-size: 60px;" class="glyphicon">
<span style="color:white;font-size: 21px; position: absolute; top: 16px;left:10px;">dd</span>
</span>
</div>
<div style="position:relative;" class="noteclasscontainer">
<select>
<option>1</option>
<option>1</option>
</select>
</div>
</div>
<button onclick="takeScreenShot()">to image</button>
<script>
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width:320,
height:220
});
}
</script>
</body>
</html>
Image is capturing correctly but only the select icon is not coming properly.how to fix this issue ?
This is part of browsers default CSS, everything is not accessible to html2canvas, and it should not be (possible leak of privacy info on some OS).
Maybe this exact one could be tweaked for chrome, since chrome does expose some of its shadow selectors, but I don't even know if it is in the list, and anyway, since non-standards these selectors could change at any time in the future, and here is how it looks like on my FF :
So the best for you, is to create the dropdown entirely from scratch. This way all UAs will show the same, and html2canvas will be able to "snapshot" it.

Controlling multiple CSS events with single Function

I am struggling to change CSS based on user actions with some script. Currently I have each navBar button performing 5 functions onClick. 1 each to change the CSS of 5 different divs. Since I am newer to scripting, I wanted to make an example similar to what I am doing in order to refer back in the future as well as hopefully help out the next person to come along.
Can someone please help me with this short example? I have tried many various scripts and just end up destroying my spirits.
For this, I want to click an openButton in the navBar and have it change the width (essentially open) a corresponding div on the page.
<div id="navBar">
<a id="div1OpenButton" class="openButton" onClick="openDiv()">div1</a>
<a id="div2OpenButton" class="openButton" onClick="openDiv()">div2</a>
<a id="div3OpenButton" class="openButton" onClick="openDiv()">div3</a>
</div>
<div id="main">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<style>
#div1 {width: 0px;}
#div2 {width: 0px;}
#div3 {width: 0px;}
</style>
Don's use onclick within your HTML - that is bad practice. You want a separation of concerns, with your JS in a separate file.
If you use jQuery (which a good library for a use-case like this), you can use its powerful selector to select all five elements at the same time. jQuery's selector is nice for beginners because it's identical to how you use selectors in CSS.
I also like to attach my JS to my HTML via IDs, not classes. This way, you know your JS has unique HTML targets to attach to.
Putting all of this together, use the jQuery selector to select all buttons, then use a .click() event to encapsulate your CSS manipulation in an anonymous function:
$(".openButton").click(function() {
$("#div1, #div2, #div3").css("width", "500px");
});
There are better ways to do it, but following the line of your code, you must pass a param to your openDiv function such as the ID of the element you want to show.
<a id="div1OpenButton" class="openButton" onClick="openDiv('div1')">div1</a>
Your onClick function must to hide all divs inside your "main" and show only the id you just passed by param.
If you need more help, paste your code please.
Try this
<html><head>
<script src=path/to/jquery.js></script>
</head><body>
<div id="navBar">
<!-- openDiv(1) with "1" is the div number -->
<a id="div1OpenButton" class="openButton" onClick="openDiv(1)">div1</a>
<a id="div2OpenButton" class="openButton" onClick="openDiv(2)">div2</a>
<a id="div3OpenButton" class="openButton" onClick="openDiv(3)">div3</a>
</div>
<div id="main">
<div id="div1">div1 opened</div>
<div id="div2">div2 opened</div>
<div id="div3">div3 opened</div>
</div>
<style>
div#main div {overflow:hidden;width:0px} //to hide div content while closed
</style>
<script>
function openDiv(n) {
$('#div'+n).width(400);} // set width to 400px
</script>
</body></html>
OR without the inline onClick()
<html><head>
<script src=path/to/jquery.js></script>
</head><body>
<div id="navBar">
<a id="div1" class="openButton" >div1</a>
<a id="div2" class="openButton" >div2</a>
<a id="div3" class="openButton" >div3</a>
</div>
<div id="main">
<div id="div1">div1 opened</div>
<div id="div2">div2 opened</div>
<div id="div3">div3 opened</div>
</div>
<style>
div#main div {overflow:hidden;width:0px} //to hide div content while closed
</style>
<script>
$('a.openButton').click(function() {
var itm = $(this).attr("id");
$("#main div#"+itm).width(400);} );// set width to 400px
</script>
</body></html>
Firstly, don't mix HTML, CSS and JavaScript in the same file. You should write your JavaScript code in a .js file, and your styles in an external stylesheet ;
Add handlers on events in your JavaScript code by using element.addEventListener() ;
Use data attributes on your buttons to link them with target divs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="navBar">
<a class="openButton" data-target="div1">div1</a>
<a class="openButton" data-target="div2">div2</a>
<a class="openButton" data-target="div3">div3</a>
</div>
<div id="main">
<div id="div1" class="container hide"></div>
<div id="div2" class="container hide"></div>
<div id="div3" class="container hide"></div>
</div>
</body>
</html>
And in the script.js file:
document.addEventListener('DOMContentLoaded', function(event) {
var divs = document.querySelectorAll('.openButton');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', openDiv);
}
});
function openDiv(e) {
// Use e.target.dataset.target
// Add 'hide' class on all containers
var containers = document.querySelectorAll('.container');
for (var i = 0; i < containers.length; i++) {
containers[i].classList.add('hide');
}
// Remove 'hide' class on the container to display
document.getElementById(e.target.dataset.target).classList.remove('hide');
}
<a id="div1OpenButton" class="openButton" onClick="openDiv(this)">div1</a>
<script>
function openDiv(e){
document.getElementById(e.innerHTML).style.width= '20px'
}
</script>

How do you write a javascript function that displays a Map in D3?

Right now, I have this working iframe for a map.
<div style=" position: absolute; top: 200px; left: 508px; width:300px;max-width:100%;overflow:hidden;height:200px;color:red;"><div id="my-map-display" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=null,+null,+null&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe>
I would like to initially have this hidden and have a function such that I can call and add and remove it on call. I am trying to write something like:
var mapIsOn = false;
showMap(_city, _state, _country){
if(mapIsOn == false){
svg.append("iframe")
... add the features listed above
.attr("id","MAP")
}else{
svg.selectAll("#MAP").remove();
mapIsOn = false;
}
Is there any way to do it? I've seem that it is possible to create div's but so far with this, I am not having much luck. Any help would be really appreciated!
There are lots of ways to achieve that. This is probably the simplest method. Idea is to set display none and remove it when we want to show the map.
.nodisplay {
display : none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#my-map-display").toggleClass("nodisplay");
});
});
</script>
</head>
<body>
<button>Toggle map</button>
<div id="my-map-display" class="nodisplay" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=null,+null,+null&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe>
</body>
</html>

jquery addClass adding subclass not working

this is my 1st time posting here, so thanks to everyone who can give me some advice!
<html>
<head>
<style>
</style>
<script src="jquery-1.5.2.js"></script>
</head>
<body>
<div
class="super"
style="
border: solid black 1px;
height:100px;
width:100px;
">
</div>
<div
class="super .eight"
style="
background: blue;
">
</div>
<script>
$(".super").click(function () {
$(this).addClass(" .eight");
});
</script>
</body>
</html>
So basically the problem is that I want to add for example a background or some other type of element onto class that is already defined as super. I am trying to use subclasses but it does not seem to be working.
Please ask me if there is anything unclear, I apologize if there is.
No dot (in the classname).
$(".super").click(function () { $(this).addClass("eight"); });
$(".super").click(function () { $(this).addClass("eight"); });

How to apply 100% height to div?

I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
In jQuery, you can try something like this:
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.
If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
Assuming you want the div 30px from the bottom of the window.
On modern browsers: set position: relative on the container div, position: absolute on the third div. Then you can position it to the top and bottom of the container the same time: top: 0px, bottom: 0px;
You could also use faux columns by adding a vertically repeating background image to the CSS making the columns appear toy the space - this gives the appear. You could add this image to the div that wraps the three columns or to the body tag.
If these columns a going to have content in them it's probably worth adding some as the columns will behave differently.
You can hide the overflow in the containing DIV:
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="overflow:hidden;height:100%">
<div style="height:100px;background-color:#ddd"></div>
<div style="height:25px;background-color:#eee"></div>
<div style="height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Note that content might dissapear when resizing the window using this technique.
You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>
You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!
html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Perhaps this could work?! But I don't know whats happens if there is to mutch text...
Simply don't worry about it if your goal is to have the colour fill the bottom.
Set the colour of the outer div, and let the third one resize its height however it wants as content goes in.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%;background-color:#ccc">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style=""> </div>
</div>
</body>
</html>
The property 'height: 100%;' will instruct browsers to take the 100 per cent of the available screen space for that particular div, which means that your browser will check the browsing space size and return it to the CSS engine without checking whether there are any elements inside it.
The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; bottom: 0;' for that div.
it a bit ugly, but it works..
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="width:100%;height:100%;">
<div style="width:100%;height:100px;background-color:#ddd;"> </div>
<div style="width:100%;height:25px;background-color:#eee;"> </div>
<div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;"> </div>
</div>
</body>
</html>
Here's a litle jquery fix I have done:
<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
<div id="firstDiv" style="height: 100px; background-color: #ddd">
</div>
<div id="secondDiv" style="height: 25px; background-color: #eee">
</div>
<div id="thirdDiv" style="background-color: #ccc;">
a</div>
</div>
</body>
</html>
$(window).resize(function(){
$('.elastic').each(function(i,n){
var ph = $(this).parent().height();
var pw = $(this).parent().width();
var sh = 0;
var s = $(this).siblings().each(function(i,n){
sh += $(this).height();
})
$(this).height(ph-sh);
sh = 0, ph = 0, s=0;
});
});
put the following on on your script tag or external javascript.
then change
when you resize the window... it will automatically fit its height to available space on the bottom. you could have as many divs as you like however you can only have one elastic inside that parent. couldnt be bothered to calculate multiple elastics :) hope it helps
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
$(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
This should be included in case the browser is resized....
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById('app').style.height = window.innerHeight + "px"
}

Categories

Resources