So I have a few items on my front page, which shows a few anime. What I am looking to do is when you hover over say the first show, "Hunter X Hunter", I want everything else on the page excluding the one that is being hovered over to be blurred.
I have looked around and seen a few examples, but I feel my situation is a bit different. All the items on the front page are just being echo'ed out from the database.
$fetch = mysqli_query($conn, "SELECT * FROM shows");
while($row = mysqli_fetch_array($fetch)){
$ID = $row['ID'];
$ShowName = $row['ShowName'];
$ShowID = $row['ShowID'];
$Updated = $row['Date'];
$Poster = $row['Poster'];
$Description = $row['Description'];
echo '
<div class="col s2 m2 2">
<div class="card large">
<div class="card-image">
<img src="'.$Poster.'">
<span class="card-title" style="color:white; text-shadow: 0 1px black;background:rgba(0,0,0,0.18);padding: 4px 8px;"><strong>'.$ShowName.'</strong></span>
</div>
<div class="card-content">
<p>'.$Description.'</p>
</div>
<div class="card-action">
<center>Watch Now!</center>
</div>
</div>
</div>
';
}
Can anyone point the way to start? I'm kind of stuck on this.
There are a couple of approaches. The easiest one could be utilizing :hover and :not(:hover) selectors, which will blur everything when you hover your mouse inside of the parent container <div class="col s2 m2 2">, in your case, but the child element that is being hovered (<div class="card large"> in your case) will remain non-blurred.
.container {
display: flex;
}
.card {
margin: 1rem;
}
.container:hover > .card:not(:hover) {
filter: blur(4px);
}
<div class="container">
<div class="card">
<img src="http://placekitten.com/120/120">
</div>
<div class="card">
<img src="http://placekitten.com/120/120">
</div>
<div class="card">
<img src="http://placekitten.com/120/120">
</div>
<div class="card">
<img src="http://placekitten.com/120/120">
</div>
</div>
You could also do that with JS in multiple ways, for example, by attaching an onmouseover event to add a class.
This is doable, see below:
HTML
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<ul>
CSS
body:hover li:not(:hover) {
filter: blur(2px);
}
Live example can be found on codepen here: https://codepen.io/anon/pen/eXpmZL?editors=1100
How this works is we do not want to blur any list items unless the user has a mouse hovering over the body of the page. This prevents items from blurring when say the mouse pointer is hover over the browser chrome or scrollbar. Then the CSS statement reads blur all li components but not the one currently being hovered over.
Related
I have some cards who are supposed to be inline, but I have to use a display none on them. When I click on a specific button, I want to display these cards; but when I do that, each cards appears to take a row when I want to have them on the same row
<div class="row" id="menu_lv2r">
<div class="col-lg-2">
<div class="card card-chart">
<div class="card-header">Character 1</div>
<div class="card-body card-body-top">
<img class="card-img" alt="character_image" src="./images/char1.jpg"/>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="card card-chart">
<div class="card-header">Character 2</div>
<div class="card-body card-body-top">
<img class="card-img" alt="character_image" src="./images/char2.jpg"/>
</div>
</div>
</div>
</div>
Theses were my 2 cards examples
If I let the code like that, they are all inline which is what I want
Now If I add some css to hide them
#menu_lv2r{
display: none;
}
The row with the 2 cards disapeared which is still fine.
But now, when I use some Js to print them again, they appear in one row each.
var elt = document.getElementById('menu_lv2r');
elt.style.display = "inline";
Thanks for your help
You should use display: flex for parent element.
elt.style.display = "flex";
It's the default value for bootstrap class .row.
Just use flex instead of inline. Everything works fine
I'm trying to create 3 simple buttons w/ a shared text area. Each button will display a different message in the shared text area when clicked. I have managed to accomplish this in a codepen here. However, when I tried to implement this into my project, it behaved much differently. The buttons no longer swapped text depending on which button was pressed, and the individual indexes are no longer being correctly tracked. My guess is that its because they're deeply nested within other divs? Not sure. Basically, when you click on one of the image icons, the corresponding text above would show. Thanks so much in advance for any help. Here is my code
$('.benefit-button').first().addClass('active');
$('.benefit-button').on('click', function(){
var $this = $(this);
$siblings = $this.parent().children(),
position = $siblings.index($this);
console.log (position);
$('#blah div').removeClass('active').eq(position).addClass('active');
$siblings.removeClass('active');
$this.addClass('active');
})
div[class*="content-"] {
display: none;
}
div.active {
display: block;
}
<div class="row lt-blue-bg">
<div class="large-12 large-centered columns benefit-section">
<span class="small-11 small-centered large-7 columns info" id="benefit">
<div class="accordionWrapper">
<div id="blah">
<div class="content-1"><h2>Happy</h2></div>
<div class="content-2"><h2>Healthy</h2></div>
<div class="content-3"><h2>Money</h2></div>
</div>
<div class="accordionItem close">
<p class="accordionItemHeading">Sources<br>+</p>
<div class="accordionItemContent">
<p style="color: black;">Yes, the Tobacco Quitline is completely FREE!</p>
</div>
</div>
</div>
</span>
<span class="small-12 large-3 columns benefit-icons">
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/rainbowicon.png" class="circle rainbow"></a>
</span>
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/hearticon.png" class="circle heart"></a>
</span>
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/moneyicon.png" class="circle money"></a>
</span>
</span>
</div>
</div>
It's the extra <span> around the <a> that doesn't correspondend with
$siblings = $this.parent().children(),
there's also a syntax error in that line: , instead of ;.
You need
$siblings = $this.parent().parent().children();
to get from a (=this) to parent (span) to parent (span above).
I'm trying to learn JS and jQuery and I'm using a project to do this. I've been scratching my head for the last 4 hours trying to figure out how to do something and I'm completely stuck.
Basically I want to update a div's content based on clicks from other div's using HTML data- attributes on the ".blue". I have price and description fields. I have managed to collect the data from the first div no matter where I click but then can't get this updated correctly based on the DIV I click in.
I've tried multiple combinations of $(this) keyword to try and make this work but couldn't figure it out. I've searched these forums and found somewhat a solution but couldn't get it, I think my mind is just too overwhelmed with this.
Here's the one I looked at: Update content in div, on click of another div
I'm sure this must be super simple but I can't get my head around it today.
Here's my code:
var upload = $('.blue').data('target1');
var download = $('.blue').data('target2');
var price = $(this).data('price');
$(document).ready(function() {
$('.blue').on('click', function() {
$(upload).removeClass('hide');
$(download).removeClass('hide');
});
$('#price').text(price);
});
div {
margin:0;
padding:0;
}
.blue {
background-color: #ddddEE;
border: 1px solid black;
}
.blue:hover {
cursor: pointer;
background-color: #aaaaEE;
}
.red {
background-color: #EEdddd;
border: 1px solid black;
}
.bold {
font-weight: 600;
text-align: center;
}
.hide {
display:none;
}
#price {
font-size: 22px;
color: blue;
font-weight: 400;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-3">
<div class="col-xs-12 blue" data-target1="#target1" data-target2="#target2">
<span>$</span><span data-price="300" id="1">300</span><br>
<p id="desc1" class="hide">Description 1</p>
<span>text here</span><br>
<span>text here</span><br>
<span>text here</span>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 blue" data-target1="#target3" data-target2="#target4">
<span>$</span><span data-price="600" id="2">600</span><br>
<p id="desc2" class="hide">Description 2</p>
<span>text here</span><br>
<span>text here</span><br>
<span>text here</span>
</div>
</div><div class="col-xs-3">
<div class="col-xs-12 blue" data-target1="#target5" data-target2="#target6">
<span>$</span><span class="prices" data-price="1200" id="3">1200</span><br>
<p id="desc3" class="hide">Description 3</p>
<span>text here</span><br>
<span>text here</span><br>
<span>text here</span>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 red">
<span class="bold">Summary</span><br>
<div id="target1" class="hide"><span>TARGET 1</span></div>
<div id="target2" class="hide"><span>TARGET 2</span></div>.
<div id="target3" class="hide"><span>TARGET 3</span></div>
<div id="target4" class="hide"><span>TARGET 4</span></div>
<div id="target5" class="hide"><span>TARGET 5</span></div>
<div id="target6" class="hide"><span>TARGET 6</span></div>
<span id="price" class=""></span>
</div>
</div>
Here is my fiddle: https://jsfiddle.net/rodcunha/qav9sn6n/42/
Thank you in advance for any help for this newbie.
To understand the cause of your problem, and how to solve it, you have to be careful in the present case of when the various instructions you've written are evaluated, and also how some of the jQuery instructions you use work.
First thing to note: the first three lines of your Javascript code are evaluated just after they have been read. So after they are evaluated, the state of your variables is as follows :
upload = '#target1'
download = '#target2'
price = undefined
Since these are the values used in the rest of the code, in all cases, you can see why it always shows what you expect for the first <div> only. To understand why, let's analyze the first line :
var upload =
$('.blue') [1]
.data('target1') [2]
[1] returns the jQuery collection containing the DOM <div> elements that have the blue class. So far, so good?
[2] returns the value associated with the data-target1 attribute of the first element of the jQuery collection (see documentation for the .data method)
What you probably want is for upload, download and price to contain the values of the data-* attributes corresponding to the <div> the user clicks on. You cannot know in advance which element the user will click on, so it does not make sense to read the values before the user clicks on anything. So you should read the values when the event is processed.
According to jQuery's documentation for the event handlers, this is the element the event is currently associated with. So your <div> element.
Now that you know that, you probably realized what you should do to correct your code. By moving your existing code around and making the smallest changes possible, you end up with the following working code.
$(document).ready(function() {
$('.blue').on('click', function() {
var upload = $(this).data('target1');
$(upload).removeClass('hide');
var download = $(this).data('target2');
$(download).removeClass('hide');
var price = $(this).find('[data-price]').data('price');
$('#price').text(price);
});
});
I'm not sure is this the behaviour you want, can you check it?
https://jsfiddle.net/rodcunha/qav9sn6n/42/
$(document).ready(function() {
$('.blue').click(function() {
var x = $(this).attr('data-target1');
$(x).removeClass('hide');
});
$('#price').text(price);
});
if You want to add or remove class hide clicking again on the div you can change the removeClass to toggleClass.
Replace you code by:
$(document).ready(function() {
$('.blue').on('click', function(e) {
$($(e.currentTarget).data('target1')).removeClass('hide');
$($(e.currentTarget).data('target2')).removeClass('hide');
$('#price').text($(e.target).parent().find('.price').data('price'));
});
});
Add a price class for every span data-price.
<span>$</span><span class="price" data-price="300" id="1">300</span><br>
HTML:
<div class="col-xs-3">
<div class="col-xs-12 blue" data-target1="#target1" data-target2="#target2">
<span>$</span><span class="price" data-price="300" id="1">300</span><br>
<p id="desc1" class="hide">Description 1</p>
<span>text here</span><br>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 blue" data-target1="#target3" data-target2="#target4">
<span>$</span><span class="price" data-price="600" id="2">600</span><br>
<p id="desc2" class="hide">Description 2</p>
<span>text here</span><br>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 blue" data-target1="#target5" data-target2="#target6">
<span>$</span><span class="prices price" data-price="1200" id="3">1200</span><br>
<p id="desc3" class="hide">Description 3</p>
<span>text here</span><br>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 red">
<span class="bold">Summary</span><br>
<!-- add 'summary' class for all div -->
<div id="target1" class="hide summary"><span>TARGET 1</span></div>
<div id="target2" class="hide summary"><span>TARGET 2</span></div>
<div id="target3" class="hide summary"><span>TARGET 3</span></div>
<div id="target4" class="hide summary"><span>TARGET 4</span></div>
<div id="target5" class="hide summary"><span>TARGET 5</span></div>
<div id="target6" class="hide summary"><span>TARGET 6</span></div>
<span id="price" class=""></span>
</div>
</div>
To get the current clicked div use currentTarget instead of target because currentTarget always return .blue contains div as event listner is set on '.blue' but target results can be different depending on your click position into .blue class div.
jQuery:
$(document).ready(function() {
$('.blue').on('click', function(e) {
var upload = $(e.currentTarget).data('target1');
var download = $(e.currentTarget).data('target2');
var price = $(e.target).parent().find('.price').data('price');
// add a new class 'summary' for all 'summary id div'.
// loop over all '.summary' class and add 'hide' class
$('.summary').each(function(index, item) {
// console.log(item);
$(item).removeClass('hide').addClass('hide');
});
$(upload).removeClass('hide');
$(download).removeClass('hide');
$('#price').text(price);
});
});
jsfiddle link: https://jsfiddle.net/sajibcse68/qav9sn6n/49/
I'm using the Superslides script to create a responsive slideshow for a site. I have created a basic caption box that I want to be hidden and then slide in from the bottom when the slide going with the caption is display.
In the Superslide script the current slide gets a higher z-index (of 2, otherwise it is set to 0) and a display: block (otherwise 'none') change to it when it's coming into view.
I am not very good with Javascript so I am having a bit of trouble targeting my captions to animate in at the right time. I put together a script that is supposed to evaluate all the li tags (each li is a different slide) and if it has a z-index of 2 it changes the bottom margin of the caption div so it slides into view. My problem is that my script only targets the very first li instead of running through all of them. For the first li it works great, I just need it to run though the rest of the li's as well. Any suggestions are appreciated!
Script:
var li = document.querySelector('li[style]'),
inlinezIndex = li.style.zIndex;
console.log(inlinezIndex);
if(inlinezIndex == 2){
document.getElementById('caption').style.bottom = '300px';
$('#caption').css({'transition': '10s'});
}
else{
document.getElementById('caption').style.bottom = '0px';
}
HTML:
<div id="slides">
<ul class="slides-container">
<li class="slide1">
<img src="images/people.jpeg" alt="Cinelli">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work1</p>
</div>
</li>
<li class="slide1">
<img src="images/surly.jpeg" width="1024" height="682" alt="Surly">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work1</p>
</div>
</li>
<li class="slide1">
<img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work2</p>
</div>
</li>
<li class="slide1">
<img src="images/affinity.jpeg" width="1024" height="685" alt="Affinity">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work3</p>
</div>
</li>
<li class="slide1">
<img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work4</p>
</div>
</li>
</ul>
<nav class="slides-navigation">
<i class="icon-chevron-right"></i>
<i class="icon-chevron-left"></i>
</nav>
</div>
Try using querySelectorAll instead of querySelector.
You could then loop through the li's and apply your styling, etc.
Also I see you are using multiple elements with the same id ("caption") and this is bad practice. Actually, I think it's invalid HTML according to the HTML5 specification as id's are supposed to be unique (look at this stackoverflow thread).
Example
var list = document.querySelectorAll('.slides-container li');
for (var i = 0; i < list.length; i++) {
var li = list[i];
var zIdx = li.style.zIndex;
// Use a class instead of id for captions
var caption = li.querySelector('.caption');
if (zIdx == 2) {
caption.style.bottom = '300px';
} else {
caption.style.bottom = '0px';
}
}
I'd also put css transitions in css (handy-dandy transitions):
.caption {
transition: bottom 10s;
}
I have a list which contains of several items that are hidden.
In my JS i want a function that changes the items of this list so it becomes visible. I want each item to become visible if a certain event has happened. The event is working fine and can be considered as shakeCount= 6, to test it properly.
Here is my list:
<div class="container">
<div class="list-group">
<div id="s1">Shake1</div>
<div id="s2">Shake2</div>
<div id="s3">Shake3</div>
</div>
</div>
What i tried so far and didn't work:
function nR(){
if (shakeCount>5)
document.getElementbyId("s1").style.visibility ="visible";
}
Thanks in advance!
Have you tried using Toggle? I would recommend it but you may need to remove the "hidden" class from your elements and add in the style="display: none;" attribute to each in order to default them to hidden.
<div class="container">
<div class="list-group">
<div id="s1">Shake1</div>
<div id="s2">Shake2</div>
<div id="s3">Shake3</div>
</div>
</div>
function nR(){
if (shakeCount>5)
document.getElementbyId("s1").toggle();
}
First, you're using getElementbyId -- it should be getElementById (missing capital 'B').
Second, you've made the #shake links visibility:hidden, but you are targeting the wrapping div when you run your js.
var shakeCount = 6;
if (shakeCount>5)
document.getElementById("s1").style.visibility ="visible";
.hidden {visibility: hidden;}
<div class="container">
<div class="list-group">
<div id="s1" class="list-group-item hidden"><a href="#shake1" >Shake1</a></div>
<div id="s2" class="list-group-item hidden"><a href="#shake2" >Shake2</a></div>
<div id="s3" class="list-group-item hidden"><a href="#shake3" >Shake3</a></div>
</div>
</div>
The above code hides the wrapping div elements instead of the links so that they are shown when the js runs.