Not sure where to look for an answer, but here's my quest:
http://www.mobiliteitsvisie.nl/
On this site I've made a one page parallax, but when scrolling the main text moves underneath the menubar, but the headers (h3 & h4) seem to move over it...
But where would I need to adjust this? In the .css or in the .js file?
Thanks in advance!
Ruud
Since you're problem is with the style you need to make a change to the CSS.
In your case you want to get the menu on top of all other objects. Just give the menu container a large z-index.
Add this to your css file:
header {
z-index: 100;
}
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Additional question about the same site. When scrolling through the site, the menu-item should change with every slide it passes. At this moment the last clicked menu-item is highlighted, even when scrolling through to the several slides. Is there an easy way to make that work in CSS? Or would that be possible by just adding a jQuery.nav.js to the index.html?
Related
I've created a tablesorter through JSFiddle, and the best way apparently to show it on a site is through adding /show at the end. However when I add this to my site, and all the other ways I've tried there is a scrollbar within the tablesorter and the heading can be scrolled up because of the results and edit in JSFiddle.
I know that probably sounds like rubbish, so I've attached a link to my site where it apepears, as you can see it is scrollable.
Is there a way of disabling the scrollbar in the HTML, CSS or JavaScript so that when it appears on my site it is fixed.
I hope ive been clear, thanks.
Link - eylestom.wix.com/tenation#!releases/c16vn
I'm assuming you mean the scrollbar in the iframe that contains your JSFiddle? I think that iframe is taller than the "tabs" div containing it. I made an inline change to the height of the iframe to 530px (allowing for your header block) and the scrollbar isn't displayed.
So, I think you could just make the iframe smaller, or make your containing div taller, or set its overflow to 'hidden'. But, your page looks like it's going to contain a lot of data down the road. I'd suggest you look at adding the 'stickyheader' or 'scroller' widgets to your tablesorter to manage the overflow more gracefully.
<iframe src="//fiddle.jshell.net/tome98/abkNM/5961/show/light/" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" style="height: 530px;"></iframe>
Problem
I am having problems with my sortable list with several items of various height. The problem occurs when I'm trying to move a larger item to the first or last position (which both have smaller objects). If I succeed currently depends very much on where on the larger item I click and start dragging.
If I want to move the item to the smaller bottom position I must click close to the bottom of the item for it to work, and if I want to drag it to the top position I must click closely to the top. But I want to be able to drag the item by clicking anywhere.
Some additional information
The items cannot be dragged outside the parent and the parent is only as large as it has to be and a scroll appears if it's larger than it's container. So it seems that I cannot drag the larger item past the first(smaller) item if I don't drag it in the top part of the item.
I've been trying to fix this by using cursorAt and using top:0 and another test using bottom:0 But it doesn't seem to make any difference (so I might have misunderstood how to use it). I am currently using tolerance: pointer.
I can bypass the problem of not being able to drag the larger item to the last position by temporary during the sorting increasing the height with the height of the dragged item. But it doesn't always work and its not a very good solution. And the problem of not being able to drag it to the top still appears?
I cannot change the JQuery code as in jquery-sortable-with-containment-parent-and-different-item-heights
Question:
How can I drag a larger item to the top or bottom position while allowing the user to click anywhere on the item?
Thanks for your help!
This might not solve your problem, but I thought I'd share the results of some experimenting I did today. I needed to make a sortable photo gallery with inline-block pictures of varying widths, and found that moving wider photos would be really hard work because the placeholder was smaller than the item I was moving. I ended up using this:
container.sortable({
placeholder: "photo placeholder",
start: function (event, ui) {
ui.placeholder.width(ui.item.width());
}
});
The custom placeholder classes are there to ensure the placeholder isn't hidden by default, and the start event ensures that the placeholder is the same width as the item you're about to move. This worked very well for me, and in your case, substituting height for width might work.
I also tried using containment as you have done, and found that it sometimes makes things much harder depending on the items in the row. Like you have explained, including tolerance: "pointer" helps to alleviate the issues, but if possible, removing containment generally makes the UI more forgiving.
I've developed menu tabs in Tabs. jsp and included it in my Main.jsp . Now is it possible to make the Tabs not scroll in the jsp (i,e) the file that is included should not be scrolling down. How do i do this?
This has got nothing to do with Struts2, what you need is a floating menu which shouldnt scroll and should be fixed, there are multiple ways of doing it, one very simple but nice way can be found here
I'm trying to override the default behavior of list items and buttons in jQuery Mobile, which has text which doesn't fit on one line as hidden overflow.
If you view this on a skinny browser window or iPhone you'll see what I mean: http://m.gizmag.com
I'd like to be able to wrap the text in the h3 and p tags of each list item onto new lines.
Thanks in advance!
Try setting a style of white-space:normal for the elements.
I just did this with an anchor (<a>) element inside a jQuery Mobile listview-styled li, and it worked to wrap the text as I expected. I used Chrome's developer tools to determine where the CSS attributes were coming from and interactively changed them to make it work the way I wanted.
--
Derek
If feasible, enclosing it inside a <div> will also make it wrap. (But finding the affected element and declaring white-space:normal is the more proper solution)
Source: http://forum.jquery.com/topic/list-items-are-truncating-text-is-there-a-way-around-this
I am currently using JQuery UI for several UI elements on my site. Is there a way to make the highlight and error bars thinner?
I am referring to the two things found in the lower-right here.
I imagine there should be a CSS property that I can change to fix this, I just can't seem to find it.
Solution: .ui-state-highlight p { margin-top:3px; margin-bottom:3px; }
On the jQuery page there is a margin on the p tag in the content. It should conform to the content that you are inserting. Can you post the problem you are having.