Why doesn't this jQuery code moving divs to the right? - javascript

jsFiddle (with slightly modified values so it appears correctly).
I am trying to move the position of some divs on my page.
div.note {float:left;width:666px; padding:0 0 0 50px;}
div.first_note {margin-left: 565px;}
The divs are horizontally displayed, with 50px between each one.
<div id="note-1" class="note first_note">
note display here
</div>
<div id="note-2" class="note">
note display here
</div>
<div id="note-3" class="note">
note display here
</div>
This is the moving code:
$('.note').animate({"left": "+=500px"}, "slow");
When this is run, the notes don't move at all, but the HTML changes to this:
<div id="note-1" class="note first_note" style="left: 500px;">
note display here
</div>
<div id="note-2" class="note" style="left: 500px;">
note display here
</div>
<div id="note-3" class="note" style="left: 500px;">
note display here
</div>
What am I doing wrong?

you need to position it relative.
div.note {
float:left;width:60px;
padding:0 0 0 50px;
position: relative;
}
demo

edited your fiddle: http://jsfiddle.net/PsQBD/1/
it should be
margin-left: +=500
without the px.

Related

How to move several images to one position, then back to their original positions

I'm trying to build a card matching game for a class I'm in, and I'm having a lot of trouble moving the cards around as I'd like them to. The images are set up in a grid. I'd like them to all move to the center, shuffle a few times, then go back to their original positions. I'm able to get them to go to the center and shuffle, but when I tell them to return to their spots, they travel about 5 times further and overshoot their original spaces. What am I doing wrong?
My images are arranged:
<div class="row">
<div class="container"><img id="1"></div>
<div class="container"><img id="2"></div>
<div class="container"><img id="3"></div>
<div class="container"><img id="4"></div>
</div>
<div class="row">
<div class="container"><img id="5"></div>
<div class="container"><img id="6"></div>
<div class="middle"></div>
<div class="container"><img id="7"></div>
<div class="container"><img id="8"></div>
</div>
<div class="row">
<div class="container"><img id="9"></div>
<div class="container"><img id="10"></div>
<div class="container"><img id="11"></div>
<div class="container"><img id="12"></div>
</div>
The image sources are set later through js. The pertinent css is like this:
img{
height:100%;
width:auto;
transform:rotate(90deg);
position:relative;
}
.container{
height:150px;
width:180px;
margin:0 2em;
}
.row{
display: flex;
justify-content: center;
margin: 5em 0 0 0;
And the jquery that's supposed to move them around is this:
$('img').each(function(index){
positions[index]=$(this).offset()
})
middle=$('.middle').offset()
$('img').each(function(index){
left=middle.left-positions[index].left-75
top=middle.top-positions[index].top
$(this).animate({
left: left,
top: top
},600)
})
for(i=0;i<5;++i){
$('img').each(function(index){
if(index<6){
$(this).animate({
left:'-=150',
},150).animate({
left:'+=150'
},150)
}
else{
$(this).animate({
left:'+=150',
},150).animate({
left:'-=150'
},150)
}
})
}
var delay=0
$('img').each(function(index){
left=middle.left-positions[index].left-75
top=middle.top-positions[index].top
$(this).delay(delay).animate({
left: left*-1,
top: top*-1
},600)
delay+=100
})
If I multiply the top and left variables on the return by like -.15 instead of -1 I can get them back to close to their original positions, but as I run the game multiple times the differences add up and get out of control. Sorry for the long code wall, thanks for any help.

How to Align a div in Center When Contents added Dynamically

Please have a look at this Image.
Here I was use the Bootstrap for aligning the divs. And created only one div. The Contents are added in this div dynamically from the admin side. then it will loop the div. That's Working fine.
But here you can see only 6 Contents are available. So 2 Divs are aligned in the left. I need these div should align in the middle of the Page. If the Contents are 7 or 5 the Second row Contents should be in the Middle. How to align these Divs Middle. Please Help me to Solve this Problem.
Here Is My Code..
<div class="col-sm-6 col-md-3">
<div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="100ms">
<img src="{{ 'assets/img/icon-services.png' |theme }} ">
<h4>{{ service['name'] }}</h4>
<p>{{ str_limit(service['description'], 100) }}</p>
Read More
</div>
</div>
Thank you in Advance.
Add display: inline to child div and text-align: center to the parent div. Don't use col-md of bootstrap because it have float: left propertive
.parent {
text-align: center;
}
.child {
display: inline-block;
width: 24%;
border: solid 1px #123;
height: 50px;
margin: 0 auto !important;
}
<div class="parent" id="parent">
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
You can use bootstrap to set an offset for each div dynamically depending on your div's desired position or set the margin of the divs to auto. See this post for a detailed explanation.

mCustomScrollbar "scrollTo" not working in a single page application

I know that there are many questions like that, but I couldn't find a solution to my problem.
In my single page application(with metro style) when I go back from a widget to home I would like to set the scroll position back where it was before entering the widget.
<div id="overflow" class="mCustomScrollbar _mCS_9" style="width: 1855px;">
<div id="mCSB_9" class="mCustomScrollBox mCS-jmsHorizontalScrollbar mCSB_horizontal mCSB_inside" style="max-height: none;" tabindex="0">
<div id="mCSB_9_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px; width: 8360px;" dir="ltr">
<div class="page" id="dashboard_all" style="width: 8360px;">
</div>
</div>
<div id="mCSB_9_scrollbar_horizontal" class="mCSB_scrollTools mCSB_9_scrollbar mCS-jmsHorizontalScrollbar mCSB_scrollTools_horizontal" style="display: block;">
<div class="mCSB_draggerContainer">
<div id="mCSB_9_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 30px; display: block; width: 403px; max-width: 1805px; left: 0px;" oncontextmenu="return false;">
<div class="mCSB_dragger_bar"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
</div>
</div>
This is the code that the plugin creates when I apply it to the div #overflow
$(document).ready(function() {
$("#overflow").mCustomScrollbar({
axis:"x",
theme:"jmsHorizontalScrollbar",
scrollButtons: {
enable: true
},
scrollInertia: 950,
callbacks:{
onScroll:function(){
//this functions sets the value in another js file. -(this.mcs.left) to get a positive value
getNavigator().setScrollLeft(-(this.mcs.left));
},
alwaysTriggerOffsets:false
}
});
})
Then I use the position found in the callback like that
$("#overflow").mCustomScrollbar("scrollTo",scrollLeft);
But nothing happens.
If I try to put a value like 3000, sometimes #overflow scrolls, but the scrollbar stays at the initial position.
Thank you in advance,
Matteo
I did it! I used the scrollTo method in the onUpdate callback
onUpdate:function(){
$("#overflow").mCustomScrollbar('scrollTo',position, {
// scroll as soon as clicked
timeout:0,
// scroll duration
scrollInertia:0,
});
}

Re-size every Element in HTML with jQuery or Canvas

I have this script working http://makeaplate.justapplications.co.uk/ and I want to save the plate (image) 2 * current size. Now the car plate have 715x160px, and i need to save it at 715*2 px 160*2 px (1430x360) and keep the quality of images.
I'm using html2canvas to save current images, but is it possible to resize all elements at once?
this is the html code for 1 plate:
<div class="plate front car with-left-badge clearfix" id="front-plate">
<div class="bg diamond"></div>
<div class="border burgundy three" style="width: 627px; height: 142px; left: auto; right: 5px; display: block;"></div>
<div class="badge left" style="display: block;"><span><div class="fimg"><img alt="" src="images/badge/uk-ireland/euro-gb.png"></div></span></div>
<p class="text hiline" style="font-weight: normal; font-size: 140px;"><span class="orange"><em class="char1">Y</em><em class="char2">O</em><em class="char3">U</em><em class="char4">R</em><em class="char5 space"> </em><em class="char6">R</em><em class="char7">E</em><em class="char8">G</em></span></p>
<div class="slogan" style="display: block;"><p style="left: 32.5px; right: auto;" class="CourierNew"><span class="red">www.makeaplateuk.com</span></p></div>
<div id="imageHolder_front_id" class="imageHolder_front"></div>
<p class="clone hiline" style="font-size: 140px;"><span class="orange"><em class="char1">Y</em><em class="char2">O</em><em class="char3">U</em><em class="char4">R</em><em class="char5 space"> </em><em class="char6">R</em><em class="char7">E</em><em class="char8">G</em></span></p></div>
and this is the result
Any ideas?
You can save it as an image first using the suggestion in this Thread. Then, using PHP GD, manipulate image size to the desired resolution.
This link might help you with PHP GD.

Bootstrap - Shrink image size as screen shrinks

I have a simple layout created to show a timer. It's a div with 6 images. I just want to shrink the size of the images as the screen size shrinks. The images are in a straight line always. I tried this:
This is how it is # 1280x800:
<div class="row" id="timer-wrap" style="margin-top: 50px;">
<img class="pull-left" src="img/left_arrow.png" id="left_arrow" />
<div id="timer" class="text-center">
<div class="col-xs-1 col-sm-2 col-lg-2">
<img src="img/timer/days.png" width="147px" height="136px" />
</div>
<div class="col-xs-1 col-sm-2 col-lg-2">
<img src="img/timer/hours.png" width="147px" height="136px" />
</div>
<div class="col-xs-1 col-sm-2 col-lg-2">
<img src="img/timer/minutes.png" width="147px" height="136px" />
</div>
<div class="col-xs-1 col-sm-2 col-lg-2">
<img src="img/timer/seconds.png" width="147px" height="136px" />
</div>
</div>
<img class="pull-right" src="img/right_arrow.png" id="right_arrow" />
</div>
And this is the CSS:
#left_arrow, #right_arrow{
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}
#left_arrow {
left: 0;
}
#right_arrow {
right: 0;
}
#timer-wrap {
position: relative;
}
#timer img {
padding: 10px;
min-width: 121px;
max-width: 100%;
}
But it's not working. It doesn't shrinks according to screen size. What can I do to achieve the result? Thanks.
The edited fiddle is this one.
Okay, first, we should nest the .col-s directly under the .row:
<div id="timer-wrap" style="margin-top: 50px;"><!-- `class="row"` removed -->
<img class="pull-left" src="img/left_arrow.png" id="left_arrow" />
<div id="timer" class="text-center">
<div class="row"><!-- added this `div` -->
...
Then we need to fix the columnizing. I'm assuming you want them centered in the page and each at most 1/4 of the screen (so they can all four fit in a row). So we want each to span as many as 3 of Bootstrap's columns, i.e. .col-xs-3. We also need to remove the height and width attributes from the img tags, as they're trumping your max-width: 100% right now. So the adjusted columns are like this:
<div class="col-xs-3">
<img src="img/timer/days.png" />
</div>
<div class="col-xs-3">
<img src="img/timer/hours.png" />
</div>
<div class="col-xs-3">
<img src="img/timer/minutes.png" />
</div>
<div class="col-xs-3">
<img src="img/timer/seconds.png" />
</div>
Since Bootstrap's grid is mobile-first, the larger screens will inherit the 3-column size unless you override them.
But then the images overlap the arrow images. So to rectify that, we're going to limit #timer's width and center it within #timer-wrap, like so:
#timer {
width: 80%; /* or whatever works */
margin: 0 auto;
}
Now, at the moment, these images are getting super small. Bootstrap's grid already has gutter padding, so you may want to remove the padding: 10px; that you have on #timer img at the moment.
Messing with the width of the #timer should help you get the look you want. You may want to adjust the layout for really really narrow screens, too.
Let me know what else you need and I'll keep the answer updated.

Categories