I'm having difficulty making this animation come to fruition upon a click with an If Else condition within it. So the #joinbox starts at "margin-top" of 7%, I want it to move on a click from #paper4 to a "margin-top" of -19%; only if it's already at 7% though. If not, I'd like it to move back to 7% upon the click. Also, I'm using the velocity js which is just a smoother .animate function.
$("#paper4").click(function() {
if ($("#joinbox").css("margin-top")=="7%")
{$("#joinbox").velocity({"margin-top": "-19%"}, 200, "easeInOutQuad");}
else {$("#joinbox").velocity({"margin-top": "7%"}, 200, "easeInOutQuad");}
});
Here is the original style of #joinbox
#joinbox {
margin-top: 7%;
margin-left: 31.5%;
width: 35%;
position: fixed;
box-shadow: 0 5px 10px #332E2C;
background-color: white;
padding: 1%;
}
According to my memory .css("margin-top") returns something in pxlike 7px not percent like 7% so maybe try converting the percentage to px. you could use something like $().offset for conversion.
Try doing console.log($("#joinbox").css("margin-top")) you wont get percentage I think.
Since you will only retrieve the value in px. You can use the parent width and calculate the % by hand.
Something like this:
$("#paper4").click(function() {
var elementMargin = parseInt($('#joinbox').css('margin-top')),
parentWidth = Math.round($('#joinbox').parent().width() * 0.07);
if(elementMargin === parentWidth) {
console.log('margin-top: 7%')
} else {
console.log('margin-top: -19%')
}
});
#joinbox {
margin-top: 7%;
margin-left: 31.5%;
width: 300px;
height: 100px;
background-color: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="joinbox">
</div>
<button id="paper4">Hay</button>
Related
Here is the pen I've created.
HTML
<div class = 'cc'>
<div class = 'bb'><div class = 'aa'> Some word </div></div>
</div>
CSS
.cc {
width: 100%;
min-height: 90px;
margin: 0;
padding: 0;
border: 1px solid #999999;
border-radius: 3px;
padding-left: 20px;
padding-right: 20px;
font-family: "Calibri";
font-size: 17px;
color: #666666;
background-color: rgba(0,0,0,.0);
}
.bb {
height: 100px;
width: 100%;
background-color: rgba(0,0,0,.5);
}
.aa {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Now I want to create a clickable event such that when user click on class bb, page will check the top parameter of class aa - if it is 50% then smoothly change that to 10% and vice versa.
I want to use JavaScript code to achieve that. How can I do that?
hey just tried to gave shot at it , seems its working please look into this
let bb = document.querySelector('.bb');
let aa = document.querySelector('.aa');
bb.addEventListener('click',e => {
let top = window.getComputedStyle(aa).getPropertyValue('top');
if(top === '50px'){
aa.style.top = '10%';
}else{
aa.style.top = '50%';
}
})
Got it. It is tested and it seems to work.
let bb = document.querySelector('.bb');
let aa = document.querySelector('.aa');
bb.addEventListener('click', function(){
if(window.getComputedStyle(aa).getPropertyValue('top') === '50px'){
aa.style.top = '10%';
}else{
aa.style.top = '50%';
}
})
First, I used querySelector to get .bb and .aa.
Then, I added a event listener to bb.
Next, in the event listener I used window.getComputedStyle(), got the value of top from it and checked if it is 50px.
Last of all, if it is, change that to 10%, else change it to 50%.
I did this on CodePen, you can check it here (notice I changed the style from gray to white because gray is hard to read inside a black box).
I am looking for some information from some front end experts on how to go about creating a custom wrap around js carousel gallery. The idea is simple really I have a carousel of images, text, or whatever and when I get to the end I want it to wrap around. I don't want the content to simply fadeIn and out to the next piece of content. This is a gallery of div's currently but suppose it's images or whatever have you.
HTML
<div id="outside-container">
<div id="inside-container" class="cf">
<div class="items" id="item1"></div>
<div class="items" id="item2"></div>
<div class="items" id="item3"></div>
<div class="items" id="item4"></div>
</div>
</div>
<div id="directions">
<h4 id="left-button">Left</h4>
<h4 id="right-button">Right</h4>
</div>
CSS
#outside-container{
display: block;
width: 400px;
height: 125px;
overflow: hidden;
border: 1px solid #000;
margin: 0px auto;
}
#inside-container{
display: block;
width: 800px;
overflow: hidden;
height: 100%;
}
.items{
float: left;
margin: 0px;
width: 200px;
height: 100%;
}
#item1{ background: green; }
#item2{ background: red; }
#item3{ background: blue; }
#item4{ background: yellow; }
#directions{
display: block;
width: 400px;
margin: 0px auto;
text-align: center;
}
#left-button, #right-button{
display: inline-block;
cursor: pointer;
margin: 10px;
}
JS
var move = 0;
$("#left-button").click(function(){
move += 200;
$("#inside-container").animate({
marginLeft: move+"px"
}, 500);
});
$("#right-button").click(function(){
move -= 200;
$("#inside-container").animate({
marginLeft: move+"px"
}, 500);
});
Here is the codepen. So to sum all this up. I am asking for a way to create an infite loop for a gallery. I have always programmed these sorts of things to come to an end and then the user has to go back the other way. If this sounds confusing follow check out the codepen. Thanks in advance.
Here you go
http://codepen.io/nickavi/pen/cpFCE
But for the love of god, please don't use jQuery animate... at least add velocity.js to it, or the GSAP plugin, you don't even have to alter your JS you just add it in and it replaces the animate function with a more efficient one.
Cheers JBSTEW
First set move to the default slider and margin reset amount:
var move = 200;
Then, set the container margin to slide left by the move amount:
var margin_reset = (move * -1) + 'px'
$("#inside-container").css('margin-left', margin_reset);
Then, adjust the animation margin slide using move variable again, and execute a function when the animation is complete that moves the last/first item to the beginning/end of the container using prepend/append.
$("#left-button").click(function(){
$("#inside-container").animate({
marginLeft: 0
}, 500, function() {
$(this).prepend( $(this).find('.items:last') )
.css('margin-left', margin_reset);
});
});
$("#right-button").click(function(){
$("#inside-container").animate({
marginLeft: (move * -2) +"px"
}, 500, function() {
$(this).append( $(this).find('.items:first') )
.css('margin-left', margin_reset);
});
});
To avoid an initial draw jump, you could change the default css #inside-container as:
#inside-container{
...
margin-left: -200px;
}
see: Codepen
I'm looking for the best way to do a progress bar (in my case it's a life bar for a game) in an html5 canvas.
I don't know if it's better to use javascript and dom element, or draw this bar directly in the canvas.
I need an update function, for example myBar.updateValue(40), and I need to show the new bar without refresh all the page or all the canvas, of course.
Do you know something like that? An existing script? Thanks!
It’s very easy in HTML/CSS:
<style>
#progress-holder{width:400px;height:20px;background:grey}
#progress{width:0;height:100%;background:black}
</style>
<div id="progress-holder">
<div id="progress"></div>
</div>
<script>
var progress = document.getElementById('progress');
function updateValue(perc) {
progress.style.width = perc+'%';
}
updateValue(40);
</script>
DEMO: http://jsbin.com/EGAzAZEK/1/edit
And animating with CSS: http://jsbin.com/EGAzAZEK/3/edit
HTML:
<div class='progress'>
<div class='progress-bar' data-width='//Enter a percent value here'>
<div class='progress-bar-text'>
Progress: <span class='data-percent'>//This is auto-generated by the script</span>
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 15px;
width: 100%;
height: 100%;
position: relative;
color: #fff;
}
.progress {
position: relative;
width: 100%;
height: 30px;
}
.progress-bar {
margin-bottom: 5px;
width: 0%;
height: 30px;
position: relative;
background-color: rgb(66, 139, 202);
}
.progress-bar-text {
position: absolute;
top: 0px;
width: 100%;
text-align: center;
/*
Do not change the values below,
unless you want your text to display away from the bar itself. */
line-height: 30px;
vertical-align: middle;
}
jQuery:
$('.progress-bar').each(function (){
var datawidth = $(this).attr('data-width');
$(this).find("span.data-percent").html(datawidth + "%");
$(this).animate({
width: datawidth + "%"
}, 800);
});
Link to JSFiddle
The HTML data-width attribute is used to track the percent the bar should be set to. Change it to your liking.
The jQuery script works with ALL progress bars on your page (See the JSFiddle, so you don't have to copy and paste the same jQuery for every new progress bar.
(Just be sure to keep the structure of the HTML, or change it to your liking).
The div "progress" is just an expander, it can be named whatever your want - without you having to change the jQuery.
EDIT:
If you can use Javascript & HTML, don't use a canvas. Canvas (imho) are good for only 1 thing: Seat bookings for concerts, theaters and alike.
I have made a simple slider gallery for my site but have found that when I click next the image updates but it does not centre until I have done a full cycle of the images
how can i get the images to align from the start?
HERE IS THE JS FIDDLE > http://jsfiddle.net/8pScd/4
HTML
<div class="view_gallery">view gallery</div>
<div class="prev control"><<</div>
<div class="next control">>></div>
<div class="gallery">
</div>
<div class="overlay"></div>
CSS
.overlay{
display: none;
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
z-index: 100;
}
.gallery{
z-index: 200;
padding: 10px;
position: absolute;
left: 50%;
background: #fff;
}
.control{
position: absolute;
top: 200px;
z-index: 300;
color: #fff;
text-transform: capitalize;
font-size: 2em;
cursor: pointer;
}
.prev{left: 0;}
.next{right:0;}
JQUERY
//images
var pics = new Array();
pics[0] = "cars.jpg";
pics[1] = "cats.png";
pics[2] = "dogs.png";
pics[3] = "bus.jpg"
//total amount of pictures to display
var pictot = pics.length-1;
var nxt = $(".next"),
prv = $(".prev"),
view = $(".view_gallery"),
gal = $(".gallery"),
overlay = $(".overlay"),
num = 0;
//view gallery
view.click(function(){
overlay.show();
gal.show();
// Start gallery off on the first image
gal.html('<img src="' + pics[0] + '" />');
});
nxt.click(function(){
// If on the last image set value to 0. Else add 1
if (num == pictot){num = 0;}else{num++;};
update();
});
prv.click(function(){
// If on first image set value to last image number. Else minus 1
if (num == 0){num = pictot;}else{num--;}
update();
});
function update () {
// update image with next/previous
gal.html('<img src="' + pics[num] + '" />');
//center image (not working very well)
var x = gal.width()/2;
gal.css("marginLeft", -x);
};
//hide
overlay.click(function(){
gal.hide();
$(this).hide();
});
The problem you have is that the "update" function is called immediately after clicking on prev/next. The image has not yet been loaded, so the code does not actually know the new gal.width yet. That's why it works after a full round: the images are now in the cache, and therefore already available.
The best solution would be to use javascript Image objects to preload the pictures; an easier way but possibly problematic is to use the 'load' event (it may not work well in all browsers).
You can align your gallery div with some simple css hack.
1)first define width. (you can define dynamic width with jquery).
2)add position:absolute;
3)add left:0 , right:0;
4)add margin:0 auto;
final code looks like this.
.gallery {
background: none repeat scroll 0 0 #FFFFFF;
left: 0;
margin: 0 auto !important;
padding: 10px;
position: absolute;
right: 0;
width: 600px;
z-index: 200;
}
your math is wrong, look at this example http://jsfiddle.net/8pScd/6/
i've just need to change your math at
var x = $('body').width()/2 - gal.width()/2;
gal.css("margin-left", x + 'px');
and i removed this line at your css
left: 50%;
.gallery{
z-index: 200;
padding: 10px;
position: absolute;
background: #fff;
}
Knowing that .gallery is 920px wide, set left: 50%; margin-left: -470px. Also remove the line in javascript which updates margin-left of the gallery container - gal.css("marginLeft", -x);
I made this tiny video (please ignore if background noises)
http://www.screenr.com/Qvts
its 13 seconds but only need to see the animation going on in second 5; (or go keepyourlinks.com and wait few seconds untill you can se the same box and click)
The css -the item has both clases-
.keepeos .top {
border-radius: 0.2em 0.2em 0.2em 0.2em;
color: #000066;
font-size: 40px;
height: 120%;
padding-bottom: 3px;
padding-top: 3px;
position: relative;
right: 10%;
top: -4px;
width: 120%;
}
.caja_con_sombra {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
And the javascript (posted the full script but commented on the only, in my opinion, relevant line.
<script type="text/javascript">
var variable;
function check_more(id){
var nID=$(".item_lista_links:first").attr("id"); //get the newest item's id
var tid= nID.replace('link', '');
$('#are_more').load('/includes/router.php?que=check_more&last='+tid+''); // check if newer
}
function buscar_nuevos(){
var nID=$(".item_lista_links:first").attr("id");
var id= nID.replace('link', '');
variable = setInterval('check_more('+id+')',15000); //start checking
}
function ver_nuevos(id){ // when found news and retrieving
clearInterval(variable);
$('#are_more').html(''); //clear div
/*THIS is basically the only relevant javascript line, i think */
$('#load_more').slideUp(100).load('/includes/router.php?que=load_more&last='+id+'',
function() {
variable = setInterval("check_more(139125)",15000);
$(this).slideDown(600); //start checking
return false;
});
}
</script>
So how can i prevent this shadow to expand the whole vertical animation?
I'm still not exactly sure what's going on, but I know how to fix it (at least for now). It might be due to the element sliding in mixed with a height issue in jquery for elements that are children in the sliding element, but I'm not sure. Either way:
Knowing that, here is a fix. In estilo.css , find
.keepeos {
height: auto;
}
Change that to:
.keepeos {
height: 18px;
}
This will work against you if that ever becomes multi-lined, so if you need to in the future, maybe you can switch the tag while sliding and then switch it back when it's done.