how can i fix this? when i click "smile" it appears smile but when i click sad it also appear a smiley face.
SMILE<br>
<div id="light"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/1024px-Smiley.svg.png" width=100 height=100></div>
SAD
<div id="light"><img src="http://www.clipartbest.com/cliparts/MiL/kkB/MiLkkBAia.png" width=100 height=100></div>
<div id="fade" onClick="lightbox_close();"></div>
CSS: fade for the close and light is for the the lightbox.
#fade{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
javascript: for the open and close function
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
You cannot use the same ID twice. You must use unique ID's.
Try this:
In the HTML, give your two light divs each a unique ID, for example lightSmile and lightSad.
In order to be able to use the same CSS for both lightboxes, give both boxes a class lightbox, and in the CSS, change the #light to .lightbox.
Finally, change the lightbox_open() function to the one below here.
HTML
SMILE<br>
<div class="lightbox" id="lightSmile"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/1024px-Smiley.svg.png" width=100 height=100></div>
SAD
<div class="lightbox" id="lightSad"><img src="http://www.clipartbest.com/cliparts/MiL/kkB/MiLkkBAia.png" width=100 height=100></div>
<div id="fade" onClick="lightbox_close();"></div>
CSS
.lightbox{
display: none;
...
}
JS
function lightbox_open(id){
window.scrollTo(0,0);
document.getElementById(id).style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('lightSmile').style.display='none';
document.getElementById('lightSad').style.display='none';
document.getElementById('fade').style.display='none';
}
If you look at the HTML, you see that now a string of the lightbox's ID is send along when lightbox_open() is called.
In the function, this ID-string is supplied as a variable (between the brackets: id). And in the line where lightbox's display-style is changed, this id is used.
In the close-function, the display-style of both the lightbox's is set back to default.
UPDATE
If you have a lot of lightboxes, it's easier to access the lightboxes by classname in the close-function:
function lightbox_close(){
var list = document.getElementsByClassName('lightbox');
for (var i=0; i<list.length; i++) {
list[i].style.display = 'none';
}
document.getElementById('fade').style.display='none';
}
And if you're willing to use jQuery, you can do that with one line (and probably more reliably cross-browser):
function lightbox_close(){
$('.lightbox').css('display','none'); //<--------------jQuery
document.getElementById('fade').style.display='none';
}
Related
I'm trying to add an image in a span with data-pic, but now I want to try a picture carousel, how can I use JavaScript to index data-pic to achieve the effect?
I follow this instruction:
W3C
$(".product-colors span").click(function () {
$(".product-colors span").removeClass("active");
$(this).addClass("active");
$("body").css("background", $(this).attr("data-color"));
$(".product-price").css("color", $(this).attr("data-color"));
$(".product-button").css("color", $(this).attr("data-color"));
$(".product-pic").css("background-image", $(this).attr("data-pic"));
});
.product-colors span {
width: 14px;
height: 14px;
margin: 0 10px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.blue {
background: #7ed6df;
}
.green {
background: #badc58;
}
.yellow {
background: #f9ca24;
}
.rose {
background: #ff7979;
}
.product-colors .active:after {
content: "";
width: 22px;
height: 22px;
border: 2px solid #8888;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
left: -4px;
top: -4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
<body>
<div class="product-card">
<h1>A new model of free group travel</h1>
<p>Travel destination</p>
<div class="product-pic"></div>
<div class="product-colors" id="Banner">
<span class="blue active" data-color="#7ed6df" data-pic="url(1.jpg)"></span>
<span class="green" data-color="#badc58" data-pic="url(2.jpg)"></span>
<span class="yellow" data-color="#f9ca24" data-pic="url(3.jpg)"></span>
<span class="rose" data-color="#ff7979" data-pic="url(4.jpg)"></span>
</div>
<div class="product-info">
<div class="product-price">$90</div>
Add to Cart
</div>
</div>
</body>
I am learning the basics of JavaScript, I don’t know how to implement this feature.
Hope you can help me
Thanks for your help :)
you can't use background and background-image together, one will overwrite the other,
By the way ,what are you trying to create? a carousel or what?
well, I guess this is what you're trying to do,
in order to achieve this, you need to declare the $('body') twice, add background-color to the first, then background-image to the second or (vice-versa),
below is the final code
var span = $('.product-colors span');
span.on('click', function() {
span.removeClass('active');
$(this).addClass('active');
$('body').css("background-color", $(this).attr('data-color'));
$('body').css('background-image', $(this).attr('data-pic'));
});
then go the css, I added background-blend property to it, so as to blend the background-color and background-image together, I also set the span to display: inline-block
check out this codepen link to see all the changes made here
Heres basically what the code looks like, it should run if pasted in sublime, what i'm trying to do is get the div to show when the page is loaded and then hide on scroll but when the button is clicked it should show wherever you are on the page. The codes a bit rough but its just a test page
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.fade').fadeOut();
}
else
{
$('.fade').fadeIn();
}
});
$(function(){
$(".box").click(function(){
$(this).find(".fade").fadeIn();
}
,function(){
$(this).find(".fade").fadeOut();
}
);
});
window.onscroll = function()
{
var left = document.getElementById("left");
if (left.scrollTop < 60 || self.pageYOffset < 60) {
left.style.position = 'fixed';
left.style.top = '60px';
} else if (left.scrollTop > 60 || self.pageYOffset > 60) {
left.style.position = 'absolute';
left.style.margin-top = '200px';
}
}
body {
height: 2000px;
}
.fade {
height: 300px;
width: 300px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
.box{color: red;}
#left{
float: left;
width: 20%;
height: 200px;
background: yellow;
position: fixed;
top: 0;
left: 150px;
}
<div class="box">
<div class="fade" id="left">
show div / hide on click (NOT HOVER)
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div style="margin-left: 90% !important;">
<button style=" position: fixed;
/* margin-right: -40% !important; */
margin-top: 0%;
background-color: red;
color: #fff;
padding: 10px 10px;
display: block;
width: 54%;
float: right;
top: 0;">show div again</button></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'>
This could work. If box is clicked, check if .fade element is already visible. If it is, then hide it, if not, show it.
$(".box").click(function(){
if($(".fade", this).is(":visible"))
{
$(".fade", this).fadeOut();
}
else
{
$(".fade", this).fadeIn();
}
});
You can use toggle since you need to alternate fadeIn and fadeOut on click
Replace hover
$(function(){
$(".box").hover(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});
With toggle
$(function(){
$(".box").toggle(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});
a quick look at the doc would have saved you headaches: http://api.jquery.com/click
It`s not working for reason - you create buttons dynamically because of that you need to call them with .live() method if you use jquery 1.7
but this method is deprecated (you can see the list of all deprecated method here) in newer version. if you want to use jquery 1.10 or above you need to call your buttons in this way:
$(document).on('click', 'selector', function(){
// Your Code
});
Your code will be something like this.
$(document).on('click', '.box', function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
});
I have a example of a situation here, I want to change the color of a div when clicked. Do I have to have two different functions, one for each div? What if the functions that I wanted to apply to the div was very complex? What if I had hundereds of the div? Can I make a general function, that can be applied for every div? By this I do not mean for example document.getElementsByClassName(" ... "), I want to for example change the color of the separately.
To be clear, how can I apply the same function to different objects? Something like document.getElementThatIsClicked(" ... " ) Thank you.
function changeColor1() {
document.getElementById("div1").style.backgroundColor = "#21a9c9";
}
function changeColor2() {
document.getElementById("div2").style.backgroundColor = "#21a9c9";
}
<div id="div1" onClick="changeColor1()" style="position:absolute; top:10px; left: 10px; width:200px; height: 200px; background-color:#000000;"></div>
<div id="div2" onClick="changeColor2()" style="position:absolute; top: 10px; left: 220px; width:200px; height: 200px; background-color:#000000;"></div>
You can make a function that accepts the element you want to change the color and make the function change the background color for that element
function changeColor(elem) {
elem.style.backgroundColor = "#21a9c9"
}
<div id="div1" onClick="changeColor(this)" style="position:absolute; top:10px; left: 10px; width:200px; height: 200px; background-color:#000000;"></div>
<div id="div2" onClick="changeColor(this)" style="position:absolute; top: 10px; left: 220px; width:200px; height: 200px; background-color:#000000;"></div>
Copied from https://stackoverflow.com/a/32828729/227299 but:
Avoids setting handlers using inline HTML attributes in favor of unobtrusively setting handlers from JavaScript itself. See onclick="" vs event handler
Avoid setting CSS attributes from HTML attributes. See What's so bad about in-line CSS?
function changeColor(elem) {
elem.style.backgroundColor = "#21a9c9"
}
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', function(e) {
changeColor(this);
});
}
#div1,#div2 {
display: inline-block;
width: 200px;
height: 200px;
background-color:#000000;
}
<div id="div1"></div>
<div id="div2"></div>
I have created website which code can be found here: https://jsfiddle.net/7y373j8x/2
I have created a box which appears when clicking on "Portfolio". (The box is called "object2").
I want to insert PNG images inside of this box. Some have suggested to me to do a jQuery slider but I don't want a slideshow. I want the images to be placed next to each other (as thumbnails) and then the user can click on an image and it should become bigger.
HTML:
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map" />
<div class="container">
<p>About me</p>
<div id="portfolio" onclick="show();">Portfolio</div>
<p>Contact me</p>
<div id="object2" onclick="show();">
</div>
</div>
CSS:
#map {
background-attachment: fixed;
}
.container {
color: yellow;
position: fixed;
top: 54%;
left: 58px;
font-family: normal normal 15px Calibri;
}
#object2 {
border-radius: 15px 50px;
background: black;
position: fixed;
bottom: 200px;
right: 400px;
width: 650px;
height: 350px;
cursor: pointer;
display: none;
z-index: 999;
opacity: 0.4;
}
JavaScript:
function show() {
document.getElementById("object2").style.display = "block";
}
you can append the images using javascript or jquery.
update your show() method like this.
function show(){
document.getElementById("object2").style.display = "block";
var image = new Image();
image.src = 'https://placehold.it/350x150';
var image1 = new Image();
image1.src = 'https://placehold.it/200x100';
$('#object2').html('');
$('#object2').append(image);
$('#object2').append(image1);
}
here's the updated JSFIDDLE for the same. hope it helps.
The reason why your function is not working is because onclick operates within the page scope so it can't execute any functions outside of it.
If I moved the script within the same scope, it will work as you can see here:
JavaScript jsfiddle: https://jsfiddle.net/AndrewL32/saTfR/60/
( I have replaced your style.display = "block" with .style.cssText = 'display: block'; )
jQuery Approach
If you are interested in using jQuery, here is a cleaner and easier jQuery approach to modifying css properties with js:
$("#portfolio").click(function(){
$("#object2").css("display", "block");
});
jQuery jsfiddle: https://jsfiddle.net/AndrewL32/saTfR/58/
I'm working on project to provide a bolt-on tool for websites, which makes heavy use of jQuery. Presentation / design is crucial, and I want to replace the standard (ugly) scrollbar applied by the browser to html elements with overflowing content, with something better looking.
There are numerous jQuery plug-ins around that apply custom scrollbars and allow styling via CSS which is great, but all the ones I've tried seem to suffer from the same problem which is this: if the scrollable content contains a form with text fields etc, tabbing between fields does not activate the scrollbar, and in some cases can screw up the custom scrollbar layout altogether.
Two examples of plug-ins I've tried:
http://manos.malihu.gr/jquery-custom-content-scroller
http://baijs.nl/tinyscrollbar/
I've tried others also, but in all demos / examples the content is plain text. I've done a lot of searching on this already, but it seems no-one has tried using these plug-ins with form-based content.
All these plug-ins seem to work in more or less the same way, and I can see exactly what happens and why, but just wondered if anyone else has had this problem and / or found a solution?
This issue can be easily replicated as follows (using the tinyscrollbar plug-in):
Add this to a standard html test page -
CSS:
<style>
#tinyscrollbartest { width: 520px; height: 250px; padding-right: 20px; background-color: #eee; }
#tinyscrollbartest .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#tinyscrollbartest .overview { list-style: none; position: absolute; left: 0; top: 0; }
#tinyscrollbartest .scrollbar { position: relative; float: right; width: 15px; }
#tinyscrollbartest .track { background: #d8eefd; height: 100%; width: 13px; position: relative; padding: 0 1px; }
#tinyscrollbartest .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#tinyscrollbartest .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#tinyscrollbartest .thumb, #tinyscrollbartest .thumb .end { background-color: #003d5d; }
#tinyscrollbartest .disable { display: none; }
</style>
Html:
<div id="tinyscrollbartest">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end"></div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">
</p>Here's a text field: <input type="text"/><p>
...
// lots of content to force scrollbar to appear,
// and to push the next field out of sight ..
...
<p>Here's another field: <input type="text"/></p>
</div>
</div>
</div>
Plug-in reference (assuming jquery libraries etc are referenced also):
<script type="text/javascript" src="scripts/jquery.tinyscrollbar.min.js"></script>
Jquery code:
<script type="text/javascript">
$(document).ready(function () {
$('#tinyscrollbartest').tinyscrollbar();
});
</script>
Now click in the first text field so it has focus, hit the tab key to move to the next one and see what happens.
I understand your problem.. But is hard to find a good solution to this. You could try to set a focus event on your form elements. And let this event trigger the scrollbar_update function of tinyscrollbar. You can set the offsetTop of the form element that currently has focus as the methods parameter. I think that would work.
$('formelements').focus(function(){
YourScrollbar.tinyscrollbar_update(this.offsetTop);
});
I had to overwrite the standard tabbing functionality with my own:
$(".scrollable").each(function() {
if (!$(this).data("scrollbar"))
{
$(this).data("scrollbar", new Scrollbar({
holder:$(this)
}));
$(this).find("input").bind("keydown", function(e)
{
var keyCode = e.keyCode || e.which;
if (keyCode == 9)
{
e.preventDefault();
var scrollTo = $(this);
if (e.shiftKey)
{
var nextInput = $(this).prevAll("input:not([type=hidden])").first();
scrollTo = nextInput.prevAll("input:not([type=hidden]), label").first();
}
else
{
var nextInput = $(this).nextAll("input:not([type=hidden])").first();
}
if (nextInput.length)
{
console.log(scrollTo);
$(this).closest(".scrollable").data("scrollbar").scrollTo(scrollTo, function()
{
nextInput.focus().select();
});
}
}
});
}
});
It's a bit annoying to have to wait for the scroll but I don't see any other option.