I've got a problem which you can look at here http://jsfiddle.net/dng2P/4/
If you click the detail button it shows you information and then if you click the "Points Statement" button it slides a layer down.
My problem is that I'm trying to make the main booking details div the same height as the points div if it's bigger and then when you click close put the main booking details height back to what it was originally.
It's half working as the main booking details div becomes the same height as the points div but just doesn't go back to what it was originally
Can anyone help?
Thanks
Jamie
How's this?
http://jsfiddle.net/dng2P/8/
All you did wrong was failing to keep the original height around properly. You only declared bookingdetailheight as a local variable which means it got re-declared for every toggle, and removed after every toggle was complete. I tied the original height to the DOM element with using .data(), it simplifies things when you might have people opening two of those toggles simultaneously.
I got on a roll though, so tidied up a bit and made the outer animate along with the inner. Oh and please look up the proper traversal methods in jQuery, parent().parent().parent().find() is asking for trouble. I think there's some left in parts I didn't look at.
I had a quick look at the jsfiddle code. I think the value that you take into the bookingdetailHeight should be declared outside the scope of the .points toggle function. that may help a little. just gonna try that :)
[edit] - didn't solve it -sorry :(
Related
Edit: Using Coll's innerText method along with Icekid's scroll behavior solved this. Thanks!
I'm using set innerHTML to apply the <mark> tag in a series of divs. For example, user presses a key and the <mark> goes from:
<mark>This is a demonstration.</mark> To show what I mean.
to
<mark>This is a demonstration. To show what I mean.</mark>
This works great except when it comes to scrolling. The text being marked is variable and sometimes requires the div to scroll. I use the following JavaScript to scroll the view:
function prompt_scroll() {
document.getElementById("next").scrollIntoView({ behavior: 'smooth'})}
The issue is each time this happens, the newly set innerHTML begins scrolled to top, then scrolls to the end of the <mark> tag. That sort of jumping up then scrolling is enough to make someone seasick!
The solution I think I need is to set the innerHTML already scrolled to the same point as the JS code I shared above. I just don't know how to accomplish this or if there is a better solution to prevent that scrolling to the top. I'll add that I'm still learning the ropes with JS so I may need a little extra info on the how and why. All guidance is appreciated.
You can add
yourElememt.scrollIntoView({behavior:"smooth", inline:"center",block:"center"})
In place of the "center" you can use
//start, "end" ,or "nearest"
To fix it to the position you want
I think you should use nearest for your case
I have an HTML div with CSS set to overflow but I am unable to set the scroll increment.
I implemented the example in this question and this JSFiddle.
However, I noticed that the scrollbar (even in the JSFiddle) barely increments when you click on the empty space on the scrollbar. This does not seem like normal behavior - normally the scroll increment is much larger.
I looked into .scrollLeft():
$('.wmd-view-topscroll').animate({scrollLeft: '+=30'}, 0);
However, I haven't seen any change in the scroll increment. How do you increase the size of the step here?
I knew where the bug was coming from as soon as i saw your code, however it might take me some time to figure out a way to explain the logic causing the bug to myself or to you.
For now, here is the solution to increasing the step of the scroll based on the JSFiddle example you provided: (However make sure you are not running an ancient version of JQuery, otherwise this solution won't work, tested on version 1.9.1 and everything works)
$(function(){
$(".wmd-view-topscroll").on("scroll",function(){
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$(".wmd-view").scrollLeft($(".wmd-view-topscroll").scrollLeft());
}, 50));
});
$(".wmd-view").on("scroll", function(){
$(".wmd-view-topscroll").scrollLeft($(".wmd-view").scrollLeft());
});
});
What the part i added does, is it waits for the scrolls to finish before it sets the new scroll on the other element, i just felt like setting the timeout to 50, set it to anything you like as long as it is long enough for the scrollbar to reach the point where you clicked.
Edit 1: thanks to #Schlumpf for clearing up my doubts, you have 2 events and the other is called whenever you call one of them, and that other one in turn calls back the one that called it and sets its new scroll to be the current scroll of itself (the second element's scroll) therefore overwriting the original scroll you wanted.
As #Schlumpf pointed out, just try to make a console.log([whatever]) whenever you call one of the scroll events to see what we are talking about.
Please ask in the comments if you need me to elaborate more.
Edit 2: As Rob explained in the comments, this is not an easy question to answer because the problem is not clear enough. So try to be explain your problem in more detail next time OP. And just in case the fiddle we are talking about is deleted by its original owner or whatever, here is a link to the fiddle we are talking about, just in case.
Due to the fact that you are looking on both sidebars they will obstruct themselves. If you delete one scroll event, the click behaviour on the white space is normally.
If you add a console.log you can see a bad issue on the code:
$(".wmd-view-topscroll").scroll(function(){
console.log("test");
$(".wmd-view")
.scrollLeft($(".wmd-view-topscroll").scrollLeft());
});
You will see that the scroll event is fired multiple times with only one mouse click. That's the problem of the bad behaviour. The two scroll events obstruct themeselves, when you press into the white space.
I think you would need something like onScrollFinished in order to fix this issue.
Alright, so the title may not be the best way to describe what i am trying to do, but i am not sure quite how to phrase it.
To start of (when the page loads) there are 20 'tiles' which serve as buttons on a page. They are divs. The 5 on top are larger and the rest of the rows are the same size.
Once one of the buttons is clicked, i want a div to show under the row of the button that is clicked. I know how to do this part using jquery toggle. Here is an example of what i will want it to look like once a button is clicked.
You can see in the drawing how i want it to sort of look like a tab once it is clicked. I am having trouble thinking of how i am going to add the part that ties the button div into the div that is toggled in the middle of the rows. This part:
I sort of thought that i could make 5 images, one for each column of buttons, that has that little part of background color, and toggle the image as well. I believe that there is a better way to do this so i am looking for a steer in the right direction. I have had some trouble searching for something like this as I dont really know what to call it so i thought i would come here for help. Thanks!
I would increase the height of the tile when it is clicked (so that it expands down from the upper red line to the lower red line shown in the last image).
It can all be done just with CSS (using the checkbox hack in the same way I made this div to increase its height) or with JavaScript (if you want reliable behaviour for IE8 and especially IE7).
Like this fiddle :
http://jsfiddle.net/techunter/ph8vY/
As far as I can make out, the only way to bring something to the front is to delete/append, or just append. However, this is so inefficient that I thought I'd just check here first.
I've got a complex set of objects which pop up on a mouseover (paths and text). I initially thought I'd handle this by creating one static instance of the popup, and hiding it. Whenever it's needed, I simply translate it and make it visible.
I thought this worked, but it turns out that it's transparent - anything which is created dynamically in a script appears on top of it. Is there any way to make this work? The alternative is to create it from scratch on every mouseover, and then to delete it on mouseout, which just feels wrong.
Thanks -
Al
You could give it an enormous z-index and toggle the visibility if it is positioned absolutely (or fixed) or the display if it is static. Least amount of redrawing is to position it absolutely or fixed, and toggle visibility between hidden and visible.
I am working on a js player and the seek bar doesnt want to play nice. You can see two on pageload, they both work properly. Now click on either first or second div with the play img on it and a bar will appear. When you click there the bar is not precise. Its several pixels off.
this.offsetLeft is giving me 0 instead of 10 which breaks this. How do i fix it?
-edit- i still dont understand why but i decided to look again a min ago and deleted random css i pasted in. i deleted this single line and it worked. I am not sure what that block does but i know without that line it currently looks the same. player is not done yet so maybe i'll need this and revisit the question
position:relative;
The position:relative style is often used to make the element the "origin" for absolutely-positioned child elements. In other words, child elements with position:absolute calculate their positions from the relative parent's position. (instead of the window's) This way child elements follow the parent wherever it is placed.
Relative positioning also lets you use 'left', and 'top' to adjust the position of the element from its normally position.
The style can also be used to fix positioning and scrolling bugs in Internet Explorer.
It maybe too late for this issue but my experience can be useful here.
I had the same problem, i was getting 0, when i called getOffsetLeft() method.
you must add your widgets into container first and then call getOffsetLeft() method.