I'm making this website:
http://frankkluytmans.nl/testsite/
And making a list view in which i'm using the wookmark jquery plugin to make the list items align proper vertically. Now the list items are collapsing vertically (see link). What can I do to solve this?
CSS:
#content ol {
position: relative;
display: block;
margin-left: -2%;
list-style-type: none;
}
#content ol li {
display: block;
width: 18%;
height: auto;
margin-left: 2%;
margin-bottom: 20px;
padding: 3px;
background: white;
float: left;
}
#content ol li img {
width: 100%;
border: none;
}
JS:
$('#content ol li').wookmark({
container: $('#content ol'),
offset: 20
});
I was able to work out a solution on my own. Turns out webkit browsers need the images to be loaded first to be able to calculate the correct height for the list elements.
I tweaked my JS to this:
$("img").load(function() {
$('#content ol li').wookmark({
container: $('#content ol'),
offset: 15
});
});
Related
I tried to develop one submenu under "Share registry operations" named as "Insider...". But I am getting only partial submenu getting displayed.
URL: http://sampledemos.online/gnsa/
I tried with the below CSS codings.
.menulist ul ul li a {
height: 30px;
line-height: 30px;
border-bottom: solid 1px #90d4e9;
font-size: 12px;
display: block;
width: 170px;
float: left;
margin-left: -23px;
}
I'm trying to create a submenu named "Insider..." under "share registry operations.
Try this code..
css
.menulist ul ul {
left: 227px;
clip: inherit !important;
opacity: 1 !important;
}
Add below to your CSS. Your javascript sets a bad clip path, probably due to negative margins. You might want to look closer into that aswell.
#listMenu-id-2 {
clip: inherit!important;
}
I've got an HTML-File.
As you can see, if you click on an image it opens a box below with some text. That works with jQuery. Is there a way to push the images under the box down?
So that the box never covers an image. Please note that it should be responsive.
Here's the fiddle:
That's the css:
#projekte {
list-style: none;
text-align: center;
width: 100%;
}
#projekte li {
display: inline-block;
margin: 10px 5px 10px 5px;
width: 300px;
}
#projekte img {cursor: pointer; width: 300px;}
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
left: 0;
position: absolute;
}
don't make the .beschreibung elements absolutely positioned, as this will take them out of the flow of the document. Change your css to:
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
}
Updated fiddle (with vertical-align:top as stated in comments)
You have to change position parameter to relative
.beschreibung {
background-color: #bec3c8;
display: none;
left: 0;
position: relative;
}
And using jQuery, you can set it's width, like:
jQuery(".beschreibung").width("desired width");
EXAMPLE FIDDLE
Also, you need to hide previous image description, like:-
$("div[id^='projekt']").hide();
You can change your CSS Class position: relative
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
left: 0;
position: relative;
}
So I just found an easy solution. I just put the .beschreibung in a wrap div and set the .beschreibung to 100% width. You can find the updatet fiddle here: https://jsfiddle.net/znt3npqa/9/
I have a file (jquerymenucss.js) in app/assets/javascripts. And I have a picture (arrow-down.gif) in app/assets/images. But this picture in not view on page!!! (view a empty picture).
How to correct write a path?
My js file:
var arrowimages={down:['downarrowclass', 'arrow-down.gif', 25], right:['rightarrowclass', 'arrow-right.gif']}
var jquerycssmenu={
fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
$targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration)
},
function(e){
$(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}
//build menu with ID="myjquerymenu" on page:
jquerycssmenu.buildmenu("myjquerymenu", arrowimages)
css file
.jquerycssmenu {
font: bold 12px Verdana;
padding-left: 30px; /*offset of tabs relative to browser left edge*/
}
.jquerycssmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.jquerycssmenu ul li {
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jquerycssmenu ul li a {
display: block;
padding: 5px 20px 10px 0;
margin-right: 3px; /*spacing between tabs*/
color: #aa9685;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.jquerycssmenu ul li a:hover {
color: #f00;
}
/*1st sub level menu*/
.jquerycssmenu ul li ul {
position: absolute;
left: 0;
display: block;
visibility: hidden;
border-top: 1px solid #973133;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jquerycssmenu ul li ul li {
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jquerycssmenu ul li ul li ul {
top: 0;
}
/* Sub level menu links style */
.jquerycssmenu ul li ul li a {
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
background: #761f20;
color: #ffffff;
padding: 8px 5px;
border-top-width: 0;
font-size: 11px;
}
.jquerycssmenu ul li ul li a:hover { /*sub menus hover style*/
background: #b14546;
color: black;
}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass {
position: absolute;
top: 7px;
right: 5px;
}
.rightarrowclass {
position: absolute;
top: 5px;
right: 5px;
}
If you're assigning the image path in JavaScript, for instance the src property of an img element, then the path will be relative to the document (not the script you're running it in). The path is relative to the document's URL as the client sees it.
(This is different from CSS, where the path is relative to the URL the client sees for the CSS file, not the document the CSS file is used in.)
So for instance:
If the client (browser) sees the document at http://www.example.com/foo/document.html, and your code is included (from anywhere) in that document, and the actual URL the image is served on is (guessing) http://www.example.com/assets/images/down-arrow.gif, then you'd need ../assets/images/down-arrow.gif or /assets/images/down-arrow.gif.
If the client sees the document at http://example.com/doc.html and the image is on http://example.com/app/assets/images/down-arrow.gif, then the relative path is app/assets/images/down-arrow.gif (or /app/assets/images/down-arrow.gif).
If you're dead set on just having all your plugin in one (JS) file and not use an extra CSS file you should use absolute URLs. Since you'll probably be including your plugin in all forms of pages (foo/, bar/this, there/is/only/zuul). Compare T.J. Crowder's answer. From the CSS file you can use relative URLs, relative to the CSS file.
I have 7 menus in my code.Sometimes it may be 6 based on the usertype.If admin is entered it will be 7.User may have only 6 menus.
How can resize the menu dynamically.
For that I used the code
<div id="menu">
<ul>
<li>home1</li>
<li>home2</li>
<li>home3</li>
<li>home4</li>
<li>home5</li>
<li>home6</li>
<li>home7</li>
</ul>
</div>
How can I do this with jquery?
EDIT
$(document).ready(function() {
if ( $('#menu ul li').length > 6 ) {
$('#menu ul li').css('width','14.5%');
}
else
{
$('#menu ul li').css('width','16.6%');
}
});
}
});
Assuming that the desired outcome is for the above menu to be rendered in one line, regardless of the exact number of items -
the best way to do this would be with tables, as they have native behavior for this type of thing ( taking up a long line and distributing items evenly over it ). The good thing is that we can easily fake that behavior using
#menu { display: table; width: 100%; }
#menu ul { display: table-row; }
#menu ul li { display: table-cell; }
this will automatically distribute your <li>s over a long line, using the containers width.
You can also see a jsFiddle with an example of the above.
Assuming hexblot's answer isn't what you wanted and you want to distribute LI's of a varying width across the width of a container element, without the LI's necessarily taking up the full-width of your navigation bar then use this:
http://jsfiddle.net/sxGMZ/
#menu ul {
display: block;
text-align: center;
width: 100%;
background: brown;
}
#menu ul li {
display: inline-block;
height: 30px;
padding: 10px 12px 0 12px;
background: #ccc;
}
Instead of table cells use display inline-block:
#menu { display: inline-block;background:#000; }
#menu ul { display: inline-block; margin:0;padding: 0; }
#menu ul li { display: inline-block; margin:0; padding: 0;}
#menu ul li a { display: inline-block; padding: 10px; color: #fff;}
#menu ul li a:hover { color: #ff0;}
Fiddle here: http://jsfiddle.net/BtvY9/
I have a menu like this
Home About Privacy Shopping Contact Us
I want to show this menu in the center of its container (whatever the width of the container is). I can apply 20% width to these list-item but then some list-item has more spacing in between and others have little due to different sizes of texts
<div id="container">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Privacy</a></li>
<li><a>Shopping</a></li>
<li><a>Contact us</a></li>
</ul>
</div>
Try using Flex Box layout (Demo):
#container ul {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
box-orient: horizontal
}
#container li {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
border: solid 1px #000;
text-align: center
}
This method allows you to use your 20% width and center the items in your container, all while keeping the same width of each item.
ul {
list-style-type: none;
width: 700px;
margin: 0 auto;
}
#container {
width: 800px;
background: #CC9;
}
li { display: block;
float: left;
width: 20%;
margin-left: -5px;
background: #399;
text-align: center;
border: solid black 1px;
color: white;
}
which you can view here... http://jsfiddle.net/r6Wwf/15/
I added a negative margin-left to compensate for the border I added so you get a better visual of how it works. I also set the width of the ul to 700px. This could be any width.
To set the entire menu in the center of a container add this to your css:
ul { margin: 0 auto; }
And then add a width to your container. This is all in the fiddle. You can set the width of the container to whatever you want. I have it at 800px.
If you're okay adding a containing element (nav is probably the most suitable), here's a good solution for you:
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Privacy</li>
<li>Shopping</li>
<li>Contact us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
float: left;
position: relative;
left: 50%;
padding: 0;
list-style: none; }
nav ul li {
float: left;
position: relative;
right: 50%;
margin: 0 10px; }
nav ul li a {
padding: 5px;
display: block; }
Preview: http://jsfiddle.net/Wexcode/bKH79/
If you want each li element to be 20% of the width of the container, just set the container to have width: 100% and set each li element to have width: 100% (you would also need to remove the margin from the li and add text-align: center).
See: http://jsfiddle.net/Wexcode/bKH79/2/
The best way to horizontally center elements in CSS is to give it a specific width, and then give it margin: auto;. Here is an example I made real quick. You can see the ul (blue border) has a width of 300px and it sits centered inside the 500px container (red border): http://jsfiddle.net/r6Wwf/4/. You can space the list elements however you would like.
What is the container width exactly..?
ok Let me assume its 960px now give width to your ul element so that the list item will not go in second line.Suppose it has taken 600px now in this case your CSS for making menu items in CENTER will be:
.container{width:960px;}
.container ul{width:600px;margin:auto}
Hope it'll solve your problem.
Pretty simple.
div#container {
width: 300px;
margin: auto 0;
}
div#container li {
display: inline-block;
padding: 15px;
}
You would definitely need to write some JavaScript to make this happen. This is how I would do it... http://jsfiddle.net/rb39A/1/
By using a little bit of jQuery you can get the dynamically sized containers you're looking for.