I googled and confirmed that there is no async thing in animate(), but couldn't find any solution for my case.
Demo http://www.bootply.com/mTPm9tr8Iu
in my demo, when you hover over first box u will see the 4th (bottom right) change it's css to margin-top:-100px and vice versa for the right first box. As you can see it seem not so smooth, how to fix that?
I think I understand what the final result should be.
The way you constructed your dom tree makes it very difficult to achieve. It would be easier if you had columns instead of cells. That way you dont have to bother about the forth cell positioning.
see how I did it : http://www.bootply.com/g2i7xGm0fb
I hope that it will be what you expected.
note: There is no use of jquery in this solution.
Related
I am trying to create an horizontal carousel that loops.
You can check the code here: https://codepen.io/nobitta/pen/xNOyrj
At the moment I am stuck. I managed to make it work, however the CSS transition that mimics the movement to the right, is not triggering when you click "next".
I already did some research and some say this has to do with browsers optimization and that setting a timeout or calling offsetWidth or getBoundingRect() should do the trick, as it forces the browser to re-render. However, even with those tips, I was not able to make it work...
Am I doing something wrong or missing something here? What should I do?
Thanks in advance ~
I managed to fix it by playing around with the margin-left property.
My bet is that when I prepended the last slider's item, it naturally shifted right due to the new element's size and the space it occupies. Therefore I decided to shift it back to mask the insertion shift. I followed the same reasoning for the appended items.
You can check the codepen in the question for more detail.
I hope this helps someone.
Hey I want to make text scroll from right to left in a div i have. I want this to happen automatically and at a constant flow.
Now when i first started with HTML the tag was used to do this, I've looked around a few websites and it seems that this tag still seems to be going. My question is really if this is the best way of achieving this affect or is there a better way of doing it? for example, javascript,Jquery and/or css Maybe even something in HTML5?
This shows what i am looking - http://www.gftuk.com/
Notice the scrolling stops when the user hovers over the text.
Thanks for the time.
<marquee>hello world</marquee>
Personally, I think the best way to achieve this would be to use jquery. There are a few plugins out there which do the job nicely.
If you want to automatic with "scroll" text ( structure of DOM is not complex) .
<marquee>This text will scroll from right to left</marquee>
But you will see with "marquee" the scroll is not smooth.
So you can use simplyScroll plugin
http://logicbox.net/jquery/simplyscroll/
( I see it in this code of your link : http://www.gftuk.com/. in next time, please open dev tools or firebugs and see source code of any pages when you want to have the same effects )
Hope it helps you
I am trying to use the slimScroll scrollbar plugin, but I had to modify it. I am trying to make it so that you pass the plugin the div that needs scrolling and using the same space as that (in the parent) the scrollbar appears. I have gotten it to add the scrollbar where i want in the dom, but it isnt scrolling. I dont know why. Can anyone help?
Code is here for you to play with/correct.
http://jsfiddle.net/rgmrw/5/
Thanks!
EDIT: The solution should also not add any divs/wrap existing ones. (Doing so messes up other existing javascript code)
Yes, I fixed it;
I actually didn't do anything, I was messing around in code but couldn't get it to work properly, so i copy pasted the code again from the original plugin at http://rocha.la/jQuery-slimScroll and it worked out of the box :)
http://jsfiddle.net/rgmrw/9/
The answer is that you cannot $(el).scrollTop() an element that isnt cutting off its children elements, even if a parent is.
Basic Concept Demo: http://jsfiddle.net/DY9CT/
Plugin Demo: http://jsfiddle.net/rgmrw/11/
I've got a large table, where the user typically needs to scroll the page to find data. This makes it difficult to track columns/rows once the headers are no longer visible. I'd like to keep the headers visible while scrolling.
I've managed to get the first row (column headers) to stay visible (jsfiddle example), but am at a loss to do the same for the first column.
PS: I don't need an iframe solution (with extra scrolls), but one similar to what I have, but for the first column.
EDIT: I've done it: jsfiddle example
Using JS seems to be a bit overkill for this solution. Working with tables can be a pain in the neck, but there's a CSS property called position: fixed which could be used for this purpose. I've put together a demo which isn't 100% perfect when it comes to lining things up, but it demonstrates how to use it for your application.
DEMO: http://wecodesign.com/demos/stackoverflow-7433377.htm
For those interested, I fixed the flickering and the flipping, and the result is now perfect (for me). (jsfiddle example)
I have a jquery accordion that I have setup with info. What I am trying to do is change an image off to the right of this accordion and the image depends on what accordion selection they selected. I am not experienced enough with jQuery to figure this out. The link is below and you can see what it is that I am explaining here. If you have time check it out. The image to the right is the one that needs to swap out to another depending on accordion selection. Any help would be greatly appreciated.
http://luistovar.com/sandbox
Thanks in advance!
The easiest way is to write some new code, instead of adding code to your existing accordeon menu code (of course you can integrate it in your existing code for the accordeon).
Place your 4 images absolute(!) on top of each other. Because of that, you'll only see one of them. Give them a class, for instance .picture. Give each picture an ID, for instance #picture1.
Give all your a tags an ID, for instance #menu_item1.
Then use the following and jQuery.
$("#menu_item1").click(
function(){
$(".picture").fadeOut(200, function(){
$("#picture1").fadeIn();
});
});
Copy this for each menu item/picture and adjust the numbers.
There are ways which end up with less code, but in this way it's easy to comprehend.
I haven't checked it, but I hope it'll help you. It should give you a small fade effect, which you can tweak by adjusting the number 200 into a smaller or bigger number (milliseconds).
Good luck!