How to horizontally justified list-items using jQuery - javascript

I've been all over stackoverflow looking for a solid solution for this; however, I'm coming up a short. I believe my problem is just in my semantics.
http://jsfiddle.net/hzRAN/10/
here's some sample code.
For best results: I would love for this script to re-adjust if there is a page width change.
the real code is linked from this website
http://designobvio.us/DoUs/Blog.html
its a fluid layout which is why I need the horizontal list item to justify itself correctly.
Thanks for the help !

The only way you can accomplish this is by setting the width of each list item or by using padding:
ul {
list-style: none;
margin-left: 0;
padding-left: 0; /* remove the indention */
overflow: hidden; /* to enclose the float children */
}
li {
width: 20%; /* actually, use some slightly undersized value to supply a bit of slop */
float: left;
}

If you are looking to use jQuery to achieve this, use the window.resize function, and then call that function on load.
$(document).ready(function(){
$(window).resize(function() {
// your code here:
});
$(window).resize();
});​
I have managed to get a quick example running on jsfiddle (I forked yours) http://jsfiddle.net/rSeaE/1/ but its having trouble due to the width of the #daymenu I think.

Related

Updating css properties real-time using jquery

I have two division classes in my responsive site: section_left1 and section_right1
section_right1 flows very well with the document, but section_left1 is the problem.
Each time the document is ready or browser has been resized, i want to pass the height of section_right1 to section_left1.
How can i change the css properties with jquery or some other easy way?
Normally you would use
var height_foo = $('#selector_foo').height();
$('#selector_bar').css({
height: height_foo,
color: green
});
Is there any problem with using this approach?
PS. Obviously you can update height_foo on window resize, or scroll or whatever you need. You're really flexible...
You would use other css properties to achieve the goal. Like the three column answer.
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
You can do this with regular Javascript:
(this method uses ID's, not classes)
x=document.getElementById('id');
x.style.height='123px';
This is according to W3.
Or, you can use JQuery:
$('.class').css({
height: 120px;
color: 'red';
});
There are multitudes of other possible ways to do this, but these are the easiest.
Hope that helps!

jQuery UI Sortable Portlets Force right or left

Based off this example on jsfiddle, what I have is identical. I'm trying to come up with a way for when you have an empty space on the right and be able to move the left div to the right without being forced back.
I've tried the following css:
$(function()
if( $(".portlet").css('left', '165px') ) {
$(".portlet").css('left', '51%');
} else {
$(".portlet").css('left', '1%');
}
)};
Just to note that I'm fairly new to jQuery UI.
One simple way to do this, if it doesn't interfere with the rest of your layout, would be to force the height of your sortable. Like this:
.sortable {
width: 200px;
float: left;
padding-bottom: 100px;
height: 600px;
}
http://jsfiddle.net/g6urafLf/1/

Hide iframe scrollbar but allow scrolling [duplicate]

I want to hide any scrollbars from my div elements and my whole body, but still let the user scroll with the mouse wheel or arrow keys. How can this be achieved with raw JavaScript or jQuery? Any ideas?
Like the previous answers, you would use overflow:hidden to disable the scrollbars on the body/div.
Then you'd bind the mousewheel event to a function that would change the scrollTop of the div to emulate scrolling.
For arrow keys, you would bind the keydown event to recognize an arrow key, and then change scrollTop and scrollLeft of the div as appropriate to emulate scrolling.
(Note: you use keydown instead of keypress since IE doesn't recognize keypress for arrow keys.)
Edit: I couldn't get FF/Chrome to recognize keydown on a div, but it works in IE8. Depending on what you needed this for, you can set a keydown listener on the document to scroll the div. (Check out the keyCode reference as an example.)
For example, scrolling with the mouse wheel (using jQuery and a mousewheel plugin):
<div id="example" style="width:300px;height:200px;overflow:hidden">
insert enough text to overflow div here
</div>
<script>
$("#example").bind("mousewheel",function(ev, delta) {
var scrollTop = $(this).scrollTop();
$(this).scrollTop(scrollTop-Math.round(delta));
});
</script>
(This is a quick mockup, you'd have to adjust the numbers since for me, this scrolls a bit slowly.)
keyCode reference
mousewheel plugin
keydown, keypress # quirksmode
Update 12/19/2012:
The updated location of the mousewheel plugin is at: https://github.com/brandonaaron/jquery-mousewheel
What about a purely CSS solution?
Solution 1 (cross browser but more hacky)
#div {
position: fixed;
right: -20px;
left: 20px;
background-color: black;
color: white;
height: 5em;
overflow-y: scroll;
overflow-x: hidden;
}
<html>
<body>
<div id="div">
Scrolling div with hidden scrollbars!<br/>
On overflow, this div will scroll with the mousewheel but scrollbars won't be visible.<br/>
Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>
</body>
</html>
Solution 2 (uses experimental features, may not support some browsers)
Just add the nobars class to any element you want to hide the scrollbars on.
.nobars {
/* Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width */
scrollbar-width: none;
/* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
-ms-overflow-style: none;
}
.nobars::-webkit-scrollbar {
/* Chrome/Edge/Opera/Safari: https://css-tricks.com/custom-scrollbars-in-webkit/ */
display: none;
}
Solution 3 (cross browser javascript)
Perfect Scrollbar doesn't require jQuery (although it can utilise jQuery if installed) and has a demo available here. The components can be styled with css such as in the following example:
.ps__rail-y {
display: none !important;
}
Here is a complete example including the implementation of Perfect Scrollbar:
<link rel="stylesheet" href="css/perfect-scrollbar.css">
<style>
#container {
position: relative; /* can be absolute or fixed if required */
height: 200px; /* any value will do */
overflow: auto;
}
.ps__rail-y {
display: none !important;
}
</style>
<script src='dist/perfect-scrollbar.min.js'></script>
<div id="container">
Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>
<script>
// on dom ready...
var container = document.getElementById("container");
var ps = new PerfectScrollbar(container);
//ps.update(container);
//ps.destroy(container);
</script>
You dont have to use jquery or js to make this. Its more performant with simple webkit.
Just add the code below to your css file.
::-webkit-scrollbar {
display: none;
}
Caution !
This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.
I much prefer SamGoody's answer provided to a duplicate of this question. It leaves native scrolling effects intact, instead of trying to manually re-implement for a few particular input devices:
A better solution is to set the target div to overflow:scroll, and wrap it inside a second element that is 8px narrower, who's overflow:hidden.
See the original comment for a fleshed-out example. You may want to use JavaScript to determine the actual size of scrollbars rather than assuming they are always 8px wide as his example does.
To get this working for me, I used this CSS:
html { overflow-y: hidden; }
But I had problems using $(this).scrollTop(), so I bound to my #id, but adjusted the scrollTop of window. Also, my smooth scrolling mouse would fire lots of 1 or -1 deltas, so I multiplied that by 20.
$("#example").bind("mousewheel", function (ev, delta) {
var scrollTop = $(window).scrollTop();
$(window).scrollTop(scrollTop - Math.round(delta * 20));
});
As Baldráni said above
::-webkit-scrollbar { display: none; }
Or you can do
::-webkit-scrollbar{ width: 0px; }
(posted for other people that stumble on this from google search!)
Well, perhaps not the most intuitive in my opinion, but I can imagine you being able to make it a decent experience, give this a try.
overflow:hidden;
make sure the parent object has a height and width, and displays as block

Disable horizontal scroll with JavaScript

Does anyone know if there is a way to disable the horizontal scrollbar using JavaScript?
I don't want to use overflow-x: hidden;.
Without using the perfectly workable overflow-x CSS property, you could resize the content to not require a scroll bar, through javascript or through HTML/CSS design.
You could also do this:
window.onscroll = function () {
window.scrollTo(0,0);
}
... which will detect any scrolling and automatically return the scroll to the top/left. It bears mentioning that doing something like this is sure to frustrate your users.
You're best served by creating an environment where unwanted UI elements are not present at all (through the CSS, through design). The approach mentioned above shows unnecessary UI elements (scroll bars) and then causes them to not work in a way that the user expects (scroll the page). You've "broken a contract" with the user - how can they trust that the rest of your web site or application will do expected things when the user makes a familiar action?
A way to prevent elements from scrolling down in jQuery:
$(element).scroll(function () {
this.scrollTop = 0;
this.scrollLeft = 0;
});
Well, this does not actually prevent the scrolling, but it "scrolls back" to the top-left corner of an element, similar to Chris' solution which was created for the window instead of single elements. Remove the scrollTop or scrollLeft lines to suit your needs.
A dirty trick would be overlapping the scrollbars: http://jsfiddle.net/dJqgf/.
var overlap = $('<div id=b>');
$("#a").wrap($('<div>'));
$("#a").parent().append(overlap);
with:
#a {
width: 100px;
height: 200px;
overflow-x: scroll;
}
#b {
position: relative;
left: 0;
bottom: 20px;
width: 100%;
height: 20px;
background-color: white;
}

Getting actual height of an auto-heighted element in IE

I'm pretty confused! with this:
...
<div id="main">
<div id="content">
<div class="col1">
...COLUMN1 CONTENT GOES HERE...
</div>
<div class="col2">
...COLUMN2 CONTENT GOES HERE...
</div>
</div><!-- #content -->
</div><!-- #main -->
...
there are columns as you see, and I want to set their container element's height to the maximum size of both columns(plus 130px). so by using Prototype framework:
//fixing column height problem
Event.observe(window,"load",function(){
if(parseInt($('col1').getStyle('height')) > parseInt($('col2').getStyle('height')))
$('main').setStyle({'height' : parseInt($('col1').getStyle('height'))+130+'px'});
else
$('main').setStyle({'height' : parseInt($('col2').getStyle('height'))+130+'px'});
});//observe
It working nice in Firefox, Opera, Safari & Chrome but it fails to return the actual height of columns. in IE7+ (not tested in IE6) it returns NaN as columns height.
I've managed to find out that's because of this:
.col1,.col2{"height:auto;"}
I've also used "$('col1').offsetHeight" and it's returning 0 as the height value of each column.
the HTML is styled in this way:
#main{
height: 455px;
background: #484848 url(../images/mainbg.png) repeat-x;
}
#content{
/*height:80%;*/
width: 960px;
direction: rtl;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.col1,.col2{
width: 33%;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}
.col1{padding-top:20px;}
.col1 ul{
margin:0;
padding:0;
list-style: url(../images/listBullet.gif);
}
.col1 ul li{
margin-bottom:20px;
}
.col2{
top: 0;
right: 70%;
position: absolute;
}
any idea on the issue please?!
update/ It tooks three days to solve, and I was at the very risk of making a bounty!
for the solution please take a look at this question/answer.
As a completion for Marc's answer; There's an equal for jQuery's height() in Prototype:
$('col1').getDimensions().height //or .width ofcourse
And here's the docs: http://prototypejs.org/api/element/getDimensions
Update: I agree with crescentfresh below. Since I had the absolute same problem in the past, I've searched all possible methods to find the dimension properties but I failed as you will. please take a look at this:
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
As you see, the function has been written to get the computed rendered current style of an element, but in our case even this method will fail, I guess. (worth a try)
So, as crescentfresh said, you have to find the problem in your CSS positioning method while not wasting your time seeking for a proper javascript function which could be able to do the magic. let's begin by removing that #content DIV and letting the #main to be the only wrapper of said columns, and then styling the remain to achieve the desired goal.
Since IE wants to give you a hard time, you can give it some special attention and use a property that I believe it will recognize...
var height;
if(document.all) { //This means it is IE
height = document.getElementById('col1').offsetHeight;
}
else {
height = //Use what is working in other browsers now
}
From:
Why would jquery return 0 for an offsetHeight when firebug says it's 34?
An element that is not actually taking
part in the document render process
has no dimensions, and will give an
offsetWidth/Height of 0.
Both Prototype's getDimensions() and jQuery's height() read the offsetHeight or clientHeight properties, which you've tried and got 0. So somewhere in your code there must be something taking #col out of the rendering flow. That's all I can think of.
Artarad,
The above style i.e. css shows that you have not assigned height.
Please try adding _height:auto in class which will look like
.col1,.col2{
width: 33%;
_height:auto;
height:auto;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}
Basically, many browsers fail to recognize the height when assigned to a particular div or any element . In this case we use the above work arounds.
I hope the above helps you.
Thanks,
Samiksha
I don't know if it will work (without testing), but you could try jQuery and height(); this (in theory) gives the computed height. Worth a try...
I know this is an old question but I found a better answer than "Fix the css and forget the javascript".
I had the exast same problem and used .innerHeight() and it forced jQuery to calculate the height. For some reason .outerHeight() did not work whilst .innerHeight() solved the problem. Not sure if there is a similar method for prototype. You could look into the jQuery library and figure out how .innerHeight() works, and write your own.

Categories

Resources