I'm trying to implement rating functionality on my website.
I have the following HTML:
<div class="rating-container">
<div class="stars">
</div>
</div>
The stars div gets populated with 10 fa fa-star font-awesome star icons during runtime via jQuery
My CSS looks like this:
div.rating-container div.stars {
display: block;
}
div.rating-container div.stars i {
font-size: 20px;
color: white;
cursor: pointer;
margin-right: 3px;
padding: 3px;
}
..And the final result looks like this:
What I want to do now is to only show 1 star instead of 10 when the page initially loads. Hovering over the 1 star should expand the stars div so that all 10 stars show and the user can rate - once the mouse leaves the stars div, it goes back to only showing one star. I'm trying to achieve this using jQuery's $(this).animate({ width: someWidthHere }); on the $(".stars").hover()function but I can't seem to get it right.
Any help/pointers would be greatly appreciated.
Thanks in advance!
Update: per request, here is the (silly) test code I've tried:
$(function () {
$(".stars").hover(
function () {
$(this).animate({ width: '100%' });
},
function () {
$(this).animate({ width: '10%' });
}
);
});
Which gives me this on hover:
Hopefully I understand your question correctly. You can get trigger an event for on and off like this:
$( ".stars" ).hover(
function() {
$( ".stars" ).animate({ width: "100px" },1000);
}, function() {
$( ".stars" ).animate({ width: "20px" },1000);
}
);
Just an FYI, I think it might be better to just use css transitions and just use the .toggleClass() to expand and contract the div. It works better with some mobile browsers that have less processing power but either way works.
This is how you would do that with css:
.stars {
width:20px;
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s;
}
.stars:hover{
width:100px;
}
Related
When using a combination of jQuery and CSS to trigger my navbar to shrink on scroll, it get's buggy when you scroll back up to a certain position, I have linked a video as an example.
I have tried two different methods. The first is using $(window).scrollTop) with an if statement and a series of .addClass and .removeClass. The second thing I have tried is using $(window).scrollTop) with a series of .css dynamic style modifications. Both of these attempts render the same end result that is shown in this video https://youtu.be/YXKsrL1cghs .
My first jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").removeClass("py-5");
$(".navbar").addClass("compressed");
} else {
$(".navbar").addClass("py-5");
$(".navbar").removeClass("compressed");
}
});
});
My second jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").css({ "padding-top": "10px" });
$(".navbar").css({ "padding-bottom": "10px" });
} else {
$(".navbar").css({ "padding-top": "3rem" });
$(".navbar").css({ "padding-bottom": "3rem" });
}
});
});
My CSS:
.navbar.compressed {
padding-top: 10px;
padding-bottom: 10px;
}
My expected results would be a smooth scrolling fixed navbar that shrinks to a smaller size after scrolling beyond a certain point.
What actually occurs is that when you scroll down past a certain point, for 20px worth of height, it gets super buggy and starts bouncing up and down. Once you clear those 20 or so px it's perfectly fine, but when you scroll back up it acts the same within those 20px.
When watching the video, I noticed that your .navbar has transition: all .3s. It could be the reason that when you remove the class py-5 and add class compressed, it triggers the transition twice.
It would be helpful if you can provide the HTML markup and CSS as well.
The script is manipulating the DOM quite a lot. I am not sure if this is going to fix your problem but it might be a good idea to only change the classes if the have not yet been applied.
$(document).ready(function() {
$(window).on("scroll", function() {
let navbar = $(".navbar");
if ($(window).scrollTop() >= 40) {
if (navbar.hasClass("py-5")) {
navbar.removeClass("py-5");
navbar.addClass("compressed");
}
} else {
if (navbar.hasClass("compressed")) {
navbar.addClass("py-5");
navbar.removeClass("compressed");
}
}
});
});
body {
height: 10000px;
position: relative;
}
.navbar {
width: 100%;
position: fixed;
height: 50px;
top: 0;
transition: all .3s
}
.py-5 {
background-color: blue;
padding-top: 10px;
padding-bottom: 10px;
}
.compressed {
background-color: red;
padding-top: 0px;
padding-bottom: 0px;
}
<html>
<head></head>
<body>
<nav class="navbar py-5">Navigation</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
i am actualy trying to create a 3D Menu for that i use CSS3 transform and jquery animate for the animation when hovering.
Here is my first working example: JSFiddle
$(document).ready(function(){
$( "li" ).on( "mouseover", function() {
$(this).animate({ trans: 55 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotateY('+now+'deg)');
$(this).css('-moz-transform','rotateY('+now+'deg)');
$(this).css('transform','rotateY('+now+'deg)');
},
duration:10000
},'linear');
});
$( "li" ).on( "mouseleave", function() {
$(this).animate({ trans: 60 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotateY('+now+'deg)');
$(this).css('-moz-transform','rotateY('+now+'deg)');
$(this).css('transform','rotateY('+now+'deg)');
},
duration:3000
},'linear');
});
});
body {
font-family: sans-serif;
}
.parent {
perspective: 50em;
}
.parent.perspective {
perspective: 1000px;
margin-top: 50px;
}
.child {
display: block;
width: 350px;
margin: 10px;
height: auto;
background-color: deepskyblue;
color:#fff;
cursor: pointer;
text-align: center;
line-height: 80px;
font-size: 26px;
transform: rotateY(60deg);
}
.child:hover {
/* transform: rotateY(10deg);*/
}
<div id="head">
<h1></h1>
<span class="description">3D Effekt auf Elementen</span>
</div>
<div id="menu">
<ul class="parent perspective">
<li class="child">First Person</li>
<li class="child">Battlefield 4</li>
<li class="child">Call of Duty</li>
<li class="child">Burnout Paradise</li>
</ul>
</div>
there are two problems / questions left:
First: the initial animation animates not from actual state to the configured as you can see in my jsfiddle - why? and what to change?
second: if i try to obtain first the configured DEG (from the css) and put it into a js variable i don't have the number (eg: 40 or 60 or whatever) - it obtains some coordinates... i need to have the solution to on mouseout reuse the origin value for the transition from the css any ideea how to get this?
Kind regards
1st: jquery hover animation runs from 0deg to 35deg. You transformed the element in CSS to 60deg.
So what happens, you see the element 60deg rotated (by CSS). Then you hover and jQuery kicks in. It animates the element from 0deg to 35deg and that's why you see it resetting first.
On mouse leave, jQuery animates to 60deg, updating the trans property.
Now when you hover again for the second time, trans is 60 and animates to 35, and the animation looks fine.
Im not a jQuery fan / expert so I don't know the proper solution to fix it. One dirty way is adding:
$(document).ready(function(){
// adding this line
$( "li" ).animate({ trans: 60}, 0);
Demo: https://jsfiddle.net/xntkwgm9/13/
Or just add
transition: transform .3s ease-out;
on your .child selector and let CSS handle it:
https://jsfiddle.net/xntkwgm9/10/
2nd: To obtain the transform as applied in CSS you could take a look at this post Get element -moz-transform:rotate value in jQuery, or https://css-tricks.com/get-value-of-css-rotation-through-javascript/
I've been wrestling with this for way too long.
Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems:
I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen.
When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way.
JSFiddle
CSS:
#abs {
position: absolute;
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}
.open {
transform: translateX(1050px);
}
.hide {
display: none;
}
p {
text-align: center;
}
JS:
$('#clickMe').on('click', function(){
$('#abs').toggleClass('open');
if($("#abs").hasClass("open")) {
setTimeout(
function() {
$("#abs").hide();
},
2500);
} else {
$("#abs").show();
}
})
Hi Please refer to the fiddle.https://jsfiddle.net/cdx7zeo2/1/
I modified your code to use jQuery animate.
$('#clickMe').on('click', function(){
var right = parseInt($('#abs').css('left'));
console.log(right);
if(right === 0){
$( "#abs" ).animate({
left:'2500px'
}, 1500);
}else{
$( "#abs" ).animate({
left:'0px'
}, 1500);
}
})
Also modified the id test to have overflow-y hidden, so that you don't need to tough overflow property of body. Note, here we are not using open class anymore.
#test {
position: relative;
height: 500px;
width: 500px;
background-color: black;
overflow-y:hidden;
}
I am trying to make a 'top bar' extend to reveal a series of links.
To do this, I have chosen jQuery and some research reveals I should toggle this.
Following many failed events at manipulating the class of the 'top bar', I have tried a different approach - see: http://jsfiddle.net/SQHQ2/2408/
The HTML:
<div id='topbar'>toggle me</div>
Toggle
The CSS:
#topbar {
background: orange;
color: white;
height: 60px;
text-align:center;
}
The jQuery:
$(".menu").click(function() {
$("#topbar").toggle(function() {
$("#topbar").animate({
height: 165
}, 200);
}, function() {
$("#topbar").animate({
height: 60
}, 200);
});
});
When I try this code, it simply hides the top bar in an animated manner.
Could you help me to achieve a solution that, on the click of a link with class '.menu', will extend the 'top bar' DIV from a height of 60px to a height of 160px, to reveal the hidden links?
I welcome solutions achieved by alternative means, so long as they work :)
Best wishes for the new year and TIA.
Another approach to consider is to keep all your CSS and JavaScript separate. Here's an example of what I mean:
HTML
<div id='topbar'>toggle me</div>
Toggle
CSS
#topbar {
background: orange;
color: white;
text-align:center;
}
.short {
height: 60px;
}
.tall {
height: 160px;
}
JavaScript
$(".menu").click(function() {
$('#topbar').toggleClass('short', 'tall');
});
The idea is to keep your styles in your CSS and then toggle the classes you want applied.
.toggle
is a handler in jQuery, that toggles on click (that is why your bar toggles when you click it)
$(".menu").toggle(function() {
$("#topbar").animate({
height: 165
}, 200);
}, function() {
$("#topbar").animate({
height: 60
}, 200);
});
should work just fine.
$(".menu").toggle(function() {
$("#topbar").animate({
height: 165
}, 200);
}, function() {
$("#topbar").animate({
height: 60
}, 200);
});
Maybe you can add an attribute to your a tag to keep the state (expanded/not-expanded). And instead of toggle just use it to animate your top bar
HTML
<div id='topbar'>toggle me</div>
<a expanded="0" href="javascript:void(0);" class="menu">Toggle</a>
JS
$(".menu").click(function() {
var thisObj = this;
var expanded = parseInt($(thisObj).attr("expanded"));
if (expanded){
$("#topbar").animate({height:60},200, function(){
$(thisObj).attr("expanded", "0");
});
} else {
$("#topbar").animate({height:160},200, function(){
$(thisObj).attr("expanded", "1");
});
}
});
So what I'm trying to do is getting a div with an animation to show up only when I hover a button. I want that div to be invisible until the page hovers it, and I want it to go back being invisible once the mouse is no longer hovering the button.
Also, I want to do this with JQuery since I've kept far away from it for too long.
JQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});
});
</script>
HTML Code:
<div id="about_hover">
<img src="images/hover.gif">
</div>
<img src="images/menu/about.png">
<br>
CSS:
#about_hover {
text-align: right;
width: 150px;
float: left;
margin: 5px 0px 0px 100px;
overflow: hidden;
}
I'm getting a few problems though. First of all, the image inside the div loads up with opacity at 100% and only goes to 80% after I hover it for the first time. After that, it fades away like it's supposed to but it doesn't show up again when I hover the button.
Any thoughts?
Thanks
Thanks!
How about using fadeTo or fadeToogle ?
Here's a small snippet made using fadeTo: http://jsbin.com/agojux ?
you can have a look at it's source here
Here is your code, but a little bit modified:
JS:
$('#about_hover').width(0);
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});
HTML:
<img src="http://www.placekitten.com/20/20/"><br>
<div id="about_hover"><img src="http://www.placekitten.com/80/80/"></div>
Honestly, it's probably best to use jQuery's on in this situation.. Your code would look something like this:
$("selector").on({
mouseenter: function () {
//fade in goes here
},
mouseleave: function () {
//fade out goes here
}
});
Hover is cool and all, but things can get messy with hover toggling. on makes this a snap. Also for your opacity's, I would probably use a fadeTo instead.
Here is the on documentation.