I'm working on project, and got stuck with JS.
Please before you read text, see the picture.
Picture
I want to make a slider (And I did), and now when I click on a circle, I want to show content-box only with the same color, and others should be hidden.
e.g. when I click on .imgRed, I want only #red to be displayed, others, #blue and #black to be display: none;.
Thank you.
I tried to create a working snippet according to the image, where I used:
A class for the circles, another class for the bars,
The circles got a data-color attribute that will target the bar to be displayed on click.
Here it is:
// When clicking a circle, use the data-colo to display the correct bar
$('.circle').click(function() {
$('.bar').hide();
var color = $(this).data('color');
$('#' + color).show();
});
// Trigger the click event on load:
$('.imgRed').trigger('click');
.circle {
display: inline-block;
margin: 8px 16px;
border: 30px solid;
border-radius: 50%;
height: 0;
width: 0;
}
.bar {
display: none;
margin: 8px 16px;
height: 40px;
width: 250px;
}
.imgRed {
border-color: red;
background-color: red;
}
.imgBlack {
border-color: black;
background-color: black;
}
.imgBlue {
border-color: blue;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle imgRed" data-color="red"></div>
<div class="circle imgBlack" data-color="black"></div>
<div class="circle imgBlue" data-color="blue"></div>
<br><br>
<div class="bar imgRed" id="red"></div>
<div class="bar imgBlack" id="black"></div>
<div class="bar imgBlue" id="blue"></div>
Hope it helps.
You probably know what you should do but you are not confident about it. You should hide others but the one that you want to stay present.
For example for red you should do:
$('.imgRed').click(function() {
$('#red').show();
$('#black').hide();
$('#blue').hide();
}
and repeat for all of the others.
$('.imgRed').click(function(){
$('#red').show();
$('#blue,#black').hide();
});
now when you click on all elements with class .imgRed only those with ID red will be visible.
the same you have to do with your other classes;
Related
I am trying to attach a div to the cursor. The div only appears when it is over a specific box, and depending on the box it hovers over it is populated with an html message.
I've got the cursor attached to the mouse, but when I hover over any of the boxes (which also turn white when hovered over,) the div and the box "glitch" really hard. I assume this has to do something with the z-index, but I can't figure it out.
function mouseHandler(ev) {
document.getElementById('boxshadow').style.transform = 'translateY(' + (ev.clientY) + 'px)';
document.getElementById('boxshadow').style.transform += 'translateX(' + (ev.clientX) + 'px)';
}
document.getElementById("talk").addEventListener("mousemove", mouseHandler)
document.getElementById("time").addEventListener("mousemove", mouseHandler)
document.getElementById("chat").addEventListener("mousemove", mouseHandler)
$("#talk").mouseleave(function() {
$("#boxshadow").hide()
});
$("#talk").mouseover(function() {
$("#boxshadow").show()
$("#boxshadow").html("Message1")
});
$("#time").mouseleave(function() {
$("#boxshadow").hide()
});
$("#time").mouseover(function() {
$("#boxshadow").show()
$("#boxshadow").html("Message2")
});
$("#chat").mouseleave(function() {
$("#boxshadow").hide()
});
$("#chat").mouseover(function() {
$("#boxshadow").show()
$("#boxshadow").html("Message3")
});
.scrolltext {
position: relative;
border-bottom: 2px solid black;
letter-spacing: -15px;
white-space: nowrap;
line-height: 80%;
overflow-y: hidden;
overflow-x: scroll;
padding: 5px;
height: 160px;
width: 100%;
font-size: 200px;
z-index: 1;
}
#talk:hover {
background-color: white;
}
#time:hover {
background-color: white;
}
#chat:hover {
background-color: white;
}
#boxshadow {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
position: absolute;
z-index: 100000000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="boxshadow"></div>
<div class="scrolltext" id="talk">
<p>A TALK WITH A GOOD FRIEND</p>
</div>
<div class="scrolltext" id="time">
<p>A LOVELY TIME WITH A GOOD FRIEND </p>
</div>
<div class="scrolltext" id="chat">
<p>A CHAT WITH A GOOD FRIEND </p>
</div>
</div>
So I think what's happening here is that your cursor can't be hovering over the div if the #boxshadow element is in the way. So the cursor triggers the box because it's over the div, then immediately isn't over the div anymore because it's over the box. So it's flipping back and forth... forever.
To avoid this, add the css property pointer-events: none; to the box. The browser will basically ignore the box when it's asking whether the mouse is "over" the div, and that should stop the glitching.
NB: If you want the user to be able to click on something in the box (obviously not an option right now, but I don't know what your plans are), with pointer-events: none the click will pass through to the div below.
First off, there's are many questions similar to mine but I haven't found an answer I've been able to use yet. I have a page that shows a login form when you enter. I also have a register form that I want hidden. With a click I want the login form replaced with the register form.
I've tried this code that I found and with a little help this could work, it has a nice smooth transition but it shows both elements from the start.
$(function() {
$('a').click(function() {
div = $(this).attr('href'); //grab #one, #two which correspond to the div id we're targeting
paragraph = $(div); //store each div in a variable for later use
$('#two').hide();
$('div').hide('grey-bg'); //remove any greyed backgrounds
$(paragraph).show('grey-bg'); //add grey background to clicked element
});
});
a {
text-decoration: none;
}
#one {
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
#two {
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
.grey-bg {
background-color: #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First Link<br />
Second Link
<div id="one">
This is the first paragraph.
</div>
<div id="two">
This is the second paragraph.
</div>
You can see it working here: https://codepen.io/raazxplorer/pen/rVKzNp
All I have done with this is changed removeClass and toggleClass to hide/show.
add display:none; in #two
#two {
margin: 10px;
padding: 20px;
border: 1px solid #000;
display:none;
}
$(function() {
$('a').click(function() {
div = $(this).attr('href'); //grab #one, #two which correspond to the div id we're targeting
paragraph = $(div); //store each div in a variable for later use
$('#two').hide();
$('div').hide('grey-bg'); //remove any greyed backgrounds
$(paragraph).show('grey-bg'); //add grey background to clicked element
});
});
a {
text-decoration: none;
}
#one {
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
#two {
margin: 10px;
padding: 20px;
border: 1px solid #000;
display:none;
}
.grey-bg {
background-color: #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First Link<br />
Second Link
<div id="one">
This is the first paragraph.
</div>
<div id="two">
This is the second paragraph.
</div>
Just Hide one of the div on page load.
What you need is:
$(document).ready(function(){
$("#two").hide();
});
Read more about (document).ready()
I made a JSFiddle, i did not put the (document).ready() part in it because its not necessary in JSFiddle.
But you can add it above $("#two").hide(); if you wish. It will also work.
I basically have to make this board that has numbers from 1 to 50 and whenever you click on one number, its background changes to a different color. I was able to do it with the first one by making the <div> clickable but I don't know how to do it with the second one that is supposed to have the value 2. Here are my codes
var Color = "#FF0";
function theFunction() {
if (Color == '#FF0') {
Color = '#F00';
} else {
Color = '#FF0';
}
document.getElementById('choose').style.backgroundColor = Color;
}
div#gameboard {
background: #CCC;
border: #999 2px solid;
width: 1200px;
height: 900px;
margin: 70px;
margin-top: 40px;
}
<div id="gameboard">
<div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
1
</div>
<div id="chose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
2
</div>
</div>
So what shall I do for the second div? Thanks
The easiest way is to remove the id's from your "number" divs, move all your styling code to CSS, and be sure to pass in this to the onclick event so you know which number div was clicked. You can then add a clicked class that turns the background red when applied and your JavaScript simply toggles the addition/removal of the clicked class.
function theFunction(e) {
e.classList.toggle("clicked");
}
#gameboard {
background: #CCC;
border: #999 2px solid;
width: 1200px;
height: 900px;
margin: 70px;
margin-top: 40px;
}
#gameboard div {
width: 240px;
height: 150px;
margin-left: 30px;
margin-top: 50px;
background-color: #FF0;
cursor: pointer;
font-size: 130px;
text-align: center;
}
#gameboard div.clicked {
background-color: #F00;
}
<div id="gameboard">
<div onclick="theFunction(this);">
1
</div>
<div onclick="theFunction(this);">
2
</div>
</div>
This will only work for current, modern browsers. If you need to support older versions of IE (namely < IE10) then you will have to change the JavaScript slightly to test for the existence of the clicked class, then add or remove it accordingly.
You might also consider using a framework, like jQuery, where you can easily toggle the add/remove of the clicked class and have all the browser-compatible code obscured within the framework.
Try this.
<div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
First you gotta change
onclick="theFunction();"
to this
onclick="theFunction(this);"
And then your function will accept a parameter
function theFunction(element) {
[...]
element.style.backgroundColor=Color;
}
That parameter is the clicked element.
I have 4 images which will be thumbnails for news articles. When the user moves their mouse over one of the images I want it to highlight. I have done this by placing a div of the same size over the image. I then tried to use JQuery to add a class to that div on mouse enter which would make it a slightly see through blue box as shown here.
HTML:
<div class="col-5 parent-center">
<div id="news1" class="news-highlight"></div>
<img src="images/news.jpg" class="news-image"/>
</div>
I know that in the JQuery I use .content as a reference to find the IDs of the news images faster. That does exist I just didn't copy in that far up the code because it would have resulted in a lot of code unrelated to my problem being pasted in.
CSS:
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-highlight
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
JQuery:
function highlightNews(newsDiv)
{
newsDiv.addClass('news-highlight');
}
function unhighlightNews(newsDiv)
{
newsDiv.removeClass('news-highlight');
}
$(document).ready(function()
{
var $content = $('.content');
var $news1 = $content.find('#news-1');
var $news2 = $content.find('#news-2');
var $news3 = $content.find('#news-3');
var $news4 = $content.find('#news-4');
function newsMouse(newsDiv)
{
newsDiv.on('mouseenter', highlightNews(newsDiv)).on('mouseleave', unhighlightNews(newsDiv));
}
newsMouse($news1);
newsMouse($news2);
newsMouse($news3);
newsMouse($news4);
});
Now you're probably crying after seeing my JQuery, I'm trying to learn it on the fly so I don't really know what I'm doing.
Thanks in advance :)
Why don't you make it with pure css without nothing of js?
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-image:hover
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
<div class="col-5 parent-center">
<div id="news1" class="news-highlight"></div>
<img src="images/news.jpg" class="news-image"/>
</div>
you can do this using pure CSS. basically highlighting is nothing but box-shadow or border on the hover.
.news-image:hover{
border:solid 1px red;
}
If you want to use JQuery to do something like this, one option is to use hover and toggleClass
$('.news-image img').hover(function() {
$(this).toggleClass('news-highlight');
});
.news-image {
float: left;
width: 33.3%;
padding: 5px;
box-sizing: border-box;
}
.news-image img{
transition: all 0.3s ease-in;
width: 100%;
}
.news-highlight {
opacity: 0.6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
If I understand what you want correctly, you should just need to change the colour of the div on top of your images when they are hovered on. This can easily be done with CSS. This should work:
.news-highlight
{
background: rgba(51, 153, 255, 0);
}
.news-highlight:hover
{
background: rgba(51, 153, 255, 0.5);
}
This will give the div a semi-transparent blue colour when the user hovers the cursor over it, and the image will show through.
You could also change the images to a greyscale at the same time, which may improve the effect.
EDIT: I should have also stated that you need to change the order of your html to this:
<div class="col-5 parent-center">
<img src="images/news.jpg" class="news-image"/>
<div id="news1" class="news-highlight"></div>
</div>
now the .news-highlight div will appear on top of your img.
Here is jsFiddle how does hover effect work. Practice is the answer! jQuery not required for something this simple
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-image:hover
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
I am simulating a pop up window that fades the background out. I do this by simply toggling a div that fills the whole screen. I would like to be able to close the pop up by clicking the outside background, but not when you click on the new content area, which is what is currently happening. My code:
JS:
function popbox() {
$('#overbox').toggle();
}
HTML:
<div class="popbox" onclick="popbox()"> Click Here </div>
<div id="overbox" onclick="popbox()">
<div id="infobox1">
<p>This is a new box</p>
<br />
<p>hello </p>
<br/><br/>
<p style="color:blue;text-align:center;cursor:pointer;" onclick="popbox()">close</p>
</div><!-- end infobox1 -->
</div> <!-- end overbox -->
CSS:
#overbox {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(64, 64, 64, 0.5);
z-index: 999999;
display: none;
}
#infobox1 {
margin: auto;
position: absolute;
left: 35%;
top: 20%;
height: 300px;
width: 400px;
background-color: white;
border: 1px solid red;
}
.popbox {
cursor: pointer;
color: black;
border: 1px solid gray;
padding: 5px; 10px;
background: ghostwhite;
display: inline-block;
}
JSFiddle link: http://jsfiddle.net/RrJsC/
Again, I want it to toggle only when you click the faded background or "close" (which isnt working in the jsfiddle but is on my site), but not when you click inside the white box that it contains.
After some research it seems like I might be looking for .stopPropagation(), but I haven't been able to get it to work at all.
I got it to work using jQuery's event handlers:
$('#container').on('click', '.popbox, #overbox', function(e){
$('#overbox').toggle();
});
$('#container').on('click', '#infobox1', function(e){
e.stopPropagation();
});
I replaced document with '#container' for better performance. You should wrap all your divs in <div id="container">...</div> so the the callback doesn't fire on the dom every time there is a click (even thought that callback is only called when the selector matches).
You'll also need to get rid of your onclick html attributes, because they will throw an error if that function is not defined.
I hope I understand well your problem.
If it is the case, you should have this:
<div id="overbox">
instead of this:
<div id="overbox" onclick="popbox()">
here is the updated jsfiddle