I have an embedded google map on my site that changes location when a button is clicked.
<% provide(:title, "Car Pooling") %>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<h1>Car Pooling</h1>
<body>
<button data-long="23.7454209" data-lat="37.9758438" typeof="button">Na Fianna</button>
<button data-long="2.3470599" data-lat="48.8588589" typeof="button">St. Pauls</button>
<button data-long="-122.081267" data-lat="37.4038194" typeof="button">Kevins</button>
<br>
<div id="info">48.8588589,2.3470599</div>
<br>
<iframe id="map" width="600" height="450" src="https://www.google.com/maps/embed/v1/view?key=AIzaSyDxbtgKBohoqXqwPNEYOUGB5WNftHUVDWw¢er=48.8588589,2.3470599&zoom=18&maptype=roadmap" frameborder="0" style="border: 0px currentColor; border-image: none;"></iframe>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</body>
And the javascript:
$(function() {
$('button').each(function(i, btn) {
$(btn).click(function() {
var el = $(this)[0];
var urlbeg="https://www.google.com/maps/embed/v1/view?key=AIzaSyDxbtgKBohoqXqwPNEYOUGB5WNftHUVDWw¢er=";
var urlend="&zoom=18&maptype=roadmap";
var lat=el.dataset.lat;
var lng=el.dataset.long;
$('#info').text(lat+","+lng);
$("iframe").attr("src",urlbeg+lat+","+lng+urlend);
});
});
});
I would like to just display the buttons and then when one is clicked the map is displayed as an overlay in the center of the screen in the foreground with the background faded slightly.
Can anyone advise on how to tackle this? Should it be done using CSS or javascript?
I would do something like this with JQuery and CSS as follows. With this method you have the flexibility to fine tune the effect to your liking.
CSS:
iframe {
display: none;
z-index: 2;
transition: all 0.8s ease;
}
.body-shade {
width: 100%;
height: 100%;
background: rgba(51, 51, 51, 0.5);
}
JQuery:
$('button').click(function(){
$('iframe').fadeIn('slow');
$('body').toggleClass('body-shade');
});
Keep in mind you can slow down the effect and change it using this method either through the jquery function or via CSS3 transition's.
Related
I need to change the image inside a div in HTML when clicking a label. I don't think I need to use jquery for that, I want to use just javascript. After some research, it looks simple, all the answers are the same, but I can't get it to work. I know the function when clicking the label works because the label change color, but the image doesn't change and I don't get any syntax error. I'm using chrome. I don't know what I'm doing wrong.
this is HTML/CSS code:
<html>
<body>
<div id="slc_on_label">
<img src=https://ichef.bbci.co.uk/news/800/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg>
</div>
<style>
#slc_on_label img {
position:fixed;
width:5.5%;
left:10%;
top:10%;
}
</style>
<label class = "button" id="button" onclick="run(this)">0</label>
<style>
.button {background-color:Powderblue;
font-size: 5vw;
}
</style>
<script src="question.js" ></script>
</body>
</html>
This is the javascript code:
function run(button) {
document.getElementById("slc_on_label").src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg";
button.style = "background-color:red";
}
You're trying to set the src attribute on <div id="slc_on_label"> instead of the <img> inside it.
You can use document.querySelector() to select the image inside the div:
document.querySelector("#slc_on_label img").src =
"https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg";
<html>
<head>
<style>
#slc_on_label img {
position: fixed;
width: 5.5%;
left: 10%;
top: 10%;
}
.button {
background-color: Powderblue;
font-size: 5vw;
}
</style>
</head>
<body>
<div id="slc_on_label">
<img src="https://ichef.bbci.co.uk/news/800/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg">
</div>
<label class="button" id="button" onclick="run(this)">0</label>
<script>
function run(button) {
document.querySelector("#slc_on_label img").setAttribute('src', 'https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg');
button.style = "background-color:red";
};
</script>
</body>
</html>
function run(button) {
document.querySelector('slc_on_label img').src =
'https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg';
button.style.backgroundColor = 'red';
}
Also not breaking the button style.
I know the onmouseover and onmouseout so that they can run a function when hovered over on when not being hovered over but I don't know how to make them expand. I have made dropdown boxes, but I can't get them to expand.
EX:
123 [Not Hovering]
123456789123 [During Hover]
I've Tried This:
<!DOCTYPE html>
<head>
</head>
<body>
<p id="exp" onmouseover="over()" onmouseout="out()" style="background- color: #FFD700;width: 100px;height: 250px;">
Expand Me!
</p>
<button onclick="run()">Run</button>
<script type="text/javascript">
function over() {
document.getElementById("exp").style.width = "250px";
}
function out() {
document.getElementById("exp").style.width = "100px";
}
</script>
<div id="x" style="background-color: #0FF"> </div>
</body>
</html>
but I want it to come out and go back in slowly not instantly, and I'm sure there is a better way to do this because I don't want to go pixel by pixel to get it to go slower because that would lagg the webpage
I think a CSS transition would be best for this, no JS needed.
div {
width: 25px;
overflow: hidden;
transition: width 1s;
}
div:hover {
width: 100%;
}
<div>123456789123</div>
I want to change the source of image with javascript,along with some effect like fadeout() or something like that.But I need to change source for more than one image,say 3 images,with fade effect or any other effect.HOW??
Below is the code i'm using but its only for 2 images how do i use for multiple images:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<script src="jquery-1.5.1.js"></script>
</head>
<style>
body{
background:url(big-image.jpg);
background-size:100% auto;
background-repeat:no-repeat;
}
#a{
width:15%;
height:25%;
position:static;
}
#b{
width:50%;
height:45%;
display:none;
left:10%;
}
</style>
<body>
<h1>
<input type="button" value="Click here" />
</h1>
<div class="frame">
<h2 align="center">
<img src="1.png" width="15%" height="31%" class="cat" id="a">
</h2>
<h3 align="center">
<img src="2.png" id="b" class="cat">
</h3>
</div>
<script type="text/javascript">
$(function(){
$("input:button").click(function(){
$(".cat").fadeToggle("slow");
});
});
</script>
</body>
</html>
yea,fade it and another image comes up...neednt be any classy
effects,even simple fade or slide would do.Is there any demo available
ok,the result must be like an image carousel,on click it should keep
fading in
Try utilizing .fadeToggle() , .prependTo(), .show() to cycle effect of fading out, fading in img elements within .frame container
$(function() {
$("input:button").click(function() {
$("img:last").fadeToggle("slow", function() {
$(this).prependTo(".frame").show()
});
});
});
.frame {
position: relative;
left: 35%;
width: 150px;
height: 150px;
}
img {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>
<input type="button" value="Click here" />
</h1>
<div class="frame">
<img src="http://lorempixel.com/150/150/cats" />
<img src="http://lorempixel.com/150/150/technics" />
<img src="http://lorempixel.com/150/150/nature" />
<img src="http://lorempixel.com/150/150/animals" />
</div>
By:#kmsdev say "you should consider to use an updated version of jQuery"
I suggest you also use the power of CSS3
$(function(){
$("input:button").click(function(){
$(".cat").css("filter","blur(6px)");
});
});
When you can give a tour of these links:
http://www.desarrollolibre.net/blog/tema/74/html5-css-js/el-filtro-blur-desenfoque-en-css-y-alguno-de-sus-posibles-usos#.VZOM3e1_NHw
http://codepen.io/libredesarrollo/full/xIHda
Something like this? jQuery's .each() loops through all elements with a specific class. .attr() changes attribute, in this case src.
References:
https://api.jquery.com/each/
http://api.jquery.com/attr/
http://api.jquery.com/animate/
$('button').click(function(){
$('.image').each(function(){
$(this).animate({
opacity: 0
}, 300, function(){
$(this).attr('src', 'http://www.spacecitynerd.com/launch/wp-content/uploads/2014/06/gaben.png');
});
$(this).animate({
opacity: 1
}, 300);
});
});
img{
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Click me</button><br>
<img src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg" class="image">
<img src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg" class="image">
Previous exemple missed to listen when image is ready (loaded) before display it back.
If you want a fadeOut/In:
// Trigger action on click (or something else)
$("img").on("click", function(){
// Store element to access it faster
var $this = $(this);
// Animate to hide it
$this.animate({
opacity: 0
}, {
// When completely transparent
complete: function(){
// Add load event to know when img is ready (loaded)
$this.on("load", function(){
// Show new image
$this.animate({
opacity: 1
});
});
// Set to image to start loading
$this.attr("src", "newurl");
}
});
});
If you want a blur, simply change opacity in animate block by :
transform: "blur(0px)" and transform: "blur(10px)"
You may have to add prefix for non-Chrome browsers
Lets try something more simple. I have a pink box and I want it to turn from pink to red when the user mouseovers it. This function is not working. Can anyone help me fix the code or find the error?? They have told me if I can't get this working I am going to be let go!!
<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>
<style type="text/css">
#input
{
margin-top:-200px;
}
</style>
</head>
<body style="background-color:black";>
<div id="draw-here-raphael" style="height: 400px; width: 400px; background: #666; z-index:0;">
</div>
<div id="input" style="z-index:99;" >
<input type="text" value="0"; style="text-align:right;" /><br />
</form>
</div>
<script type="text/javascript">
//all your javascript goes here
$(function() {
var r = new Raphael("draw-here-raphael"),
// Store where the box is
position = 'left',
// Make our pink rectangle
rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
$("rect").(function(i) {
$("rect").mouseover(function() {
$("rect").attr({"fill": "red"});
});
});
});
</script>
</body>
</html>
why dnt u use css for this
#draw-here-raphael:hover{background-color:Red;}
Or, Use this code instead
$(rect).mouseover(function() {
this.attr({"background-color": "red"});
});
Try changing the $("rect") to just rect
rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
rect.(function(i) {
rect.mouseover(function() {
rect.attr({"fill": "red"});
});
});
However as someone pointed out in a comment it may not work with SVG.
If you have the rect as a div with height and width, fixed position with left and top and a background-color you can just change the css value of background-color on mouseover.
For a div example:
Suppose you have a div with id="pinkBox"
$('#pinkBox').mouseover(function() {
$(this).css('background-color','#ff0000');
});
You will need to position the div too, I'm not sure how the Raphael stuff works, never looked at it personally, but if its fixed positioning then you can emulate this in css with position:fixed; top: some value; left: some value; width: some value; height: some value
Full code:
HTML:
<div id="pinkBox" style="position:fixed; left:20, top:20; width:250; height:300" ></div>
Javascript:
$(document).ready(function() {
$('#pinkBox').mouseover(function() {
$(this).css('background-color','#ff0000');
});
});
Unfortunately if you are not using CSS3 you will not be able to have rounded corners unless you use images. Using CSS3 though you can add rounded corners by adding the following style to the div
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
For simplicity I have added the styles inline on the div, I would suggest making a class though and using the class attribute, keeping your css in a seperate file or in the head of your document.
I changed it around a bit, but what about something like this:
var canvas = Raphael(document.getElementById("draw-here-raphael"));
// Make rectangle pink
var r = canvas.rect(20, 20, 250, 300, 10).attr("fill", "#fbb");
$("#draw-here-raphael").mouseover(function() {
r.attr("fill", "red");
});
http://jsfiddle.net/7PLy9/
Well, I'm working on a visual form designer and decided to use jQuery UI as both the end form widgetset as well as the widgetset for the designer itself.
My main concern is to make jQuery wigets "read-only". I've had the following idea:
<style type="text/css">
.widget-wrap { position: relative; }
.widget-overlay { position: absolute; left:0; right:0; top:0; bottom:0; /*maybe z-index as well*/ }
</style>
<div class="widget-wrap" id="wdt1">
<button class="jquery-widget">Hello World!</button>
<div class="widget-overlay"><!----></div>
</div>
<script type="text/javascript">
$(function() {
$("button.jquery-widget").button();
});
function widgetLock(){
$("#wdt1 .widget-overlay").show();
}
function widgetRelease(){
$("#wdt1 .widget-overlay").hide();
}
</script>
Hope my example makes sense :)
My questions are;
does this sound good to you?
do you know of a better or another way?
do you see any possible issues with it?
I would say this is a very bad idea in that 1) you may find the overlay in a weird place in certain browser resolutions etc and 2) you can still tab to the item.
Much better to either;
Hide the element
Disable the element
Replace text boxes with labels, buttons with graphics etc.
Disable the click on the button
edit
You can use jQuery to unbind events on elements and then you can re-bind them later on.
If I was to build a form designer I'd make all elements divs with an image of the actual widget as a css background image, that way you can drag the widget representation around the form without activating it or having any of the overlay problems.
If you really wanted to make it look like the finished product you can have the actual widget nested inside the div but invisible when the users mouse is within the div, when the user moves the mouse out of the div then set the widget visible again.
DC
Yes I was aware that the background image would look wrong when stretched. So I thought about it on the way home. A better technique would be to create a widget sandwich
place the widget between 2 divs the bottom div controls the size and position the top prevents the widget from activating
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<style type="text/css">
<!--
.widget {
height: 100%;
width: 100%;
}
.widget_overlay {
border: thin solid #FF0000;
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
right: 1px;
visibility:visible
}
.sz_controller {
position:absolute;
width:365px;
height:61px;
left: 142px;
top: 75px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function ShowHide(button,id){
elem = document.getElementById(id)
if (elem.style.visibility=='hidden') {
elem.style.visibility='visible';
button.value="Hide Overlay";
} else {
elem.style.visibility = 'hidden';
button.value="Show Overlay";
}
}
</script>
</head>
<body>
<input type="button" name="Button" value="Hide Overlay" onClick="ShowHide(this,'widget_overlay')">
<div id="draggable" class="sz_controller" style=""><select class="widget" name="test">
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</select><div id="widget_overlay" class="widget_overlay"></div></div>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</body>
</html>
The above will work in firefox
Clicking the button hides the overlay div allowing testing of the widget, You can drag the object around the screen, no resizing logic has been implemented.
DC