am trying to make list ("ul"), where later then i add values with jquery, with .prepend() function. I would like to make all these new values, to be hidden, like out of div and later i will show them but then i add them, they must be hidden. Are there any way to do something like that?
I made a picture to show my problem, so what i wanted to do, id like i add 5 and 6 li element with JQuery and they must be in that "hidden area", and list in "visible area" wont change. So far i made that list, but then i add new element it goes in visible area, and li elements order on visible area goes like:"6, 5, 1, 2".
EDIT.
I tired to solve my problem with #mboldt suggestion, but it didnt worked for me or i did something incorrectly. My code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
.item-list-inner {
float:left;
width: 600px;
overflow: hidden;
border:2px solid black;
}
.item-list-ul {
position:relative;
list-style-type: none;
margin: 0px;
padding: 0px;
width:9999px;
height:100px;
}
.item-list-ul li {
display: inline-block;
*display: inline; /*IE7*/
*zoom: 1; /*IE7*/
float: left;
}
.item{
width:80px;
height:80px;
border:1px solid red;
margin:7px;
}
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<div class="item-list-inner">
<ul class="item-list-ul">
<li>
<div class="item">1</div>
</li>
<li>
<div class="item">2</div>
</li>
<li>
<div class="item">3</div>
</li>
<li>
<div class="item">4</div>
</li>
<li>
<div class="item">5</div>
</li>
<li>
<div class="item">6</div>
</li>
</ul>
</div>
</div>
</body>
</html>
But when i tried to prepend new element with jquery:
$(".item-list-ul").prepend("<li><div class='item'>jquery</div></li>")
New li element goes in from of list, instead in that "hidden" place:
First row is the result i want to get, like new element goes in that invisible (hidden area) and wont be shown until i rotate list.
Second row is the result i got now with my code. As you see then i prepend new li element it goes in front of list but in visible area, and moves other li elements.
You can add them class ".addClass( 'hidden' )" and in css file ".hidden{display:none;}
Later you just need to ".removeClass( 'hidden' )" to show them.
If you create the list item before you add it to the list you can sipmly hide it via the jQuery method like this
var item = $("<li>hidden item</li>");
$(item).hide();
$("#list").prepend(item);
Check out this jsfiddle, it only shows 3 list items but if you look at the source code with firebug you'll see another hidden list item was added.
However if you are trying to implement something like a slider, the the overflow-property might be the thing you are looking for (hard to tell with the information given).
EDIT
Now that you updated your question and I think I now know what you are trying to do I created a new jsfiddle with another solution. Check it out and see if that is what you are trying to do and if the code helps you.
In the jsfiddle there are two buttons, one to scrolle the list to the right and one to prepend an item to the "invisible area" on the left of the list.
Note: This is not really clean, i.e. when scrolling there are still borders showing, which should actually be hidden but I think this is good enough to show the idea.
Related
I have a tricky layout that I'm trying to add type-to-search to. (The actual code uses Angular, but it looks like my problem is just the CSS.)
https://jsfiddle.net/dowxw1dz/2/
In a single TD, there are two floating bits off to the right (a descriptive label, and a button unrelated to the label). The main part of the TD is a text input, which takes up the remainder of the space. I'm trying to enhance the input by making it show a div with search results below it, overlaying the stuff below the input.
The problem I'm hitting is that the div containing the input is overflow:auto, so when the search results show up, they just add a scrollbar to the input div (with the search results visible if you scroll), rather than showing the search results on top of the other content. I could fix this by changing the overflow to something else, but then the two floating elements to the right decide to get out of the way of the input.
How can I get the search results to show over the lower content, rather than being trapped in the input div with a scrollbar? Ideally, I want the search results to be exactly as wide as the input (which is going to be variable), but my first problem is just to get the search results to show without either shoving around the floating elements or shoving the results behind a scrollbar.
HTML:
<div style="width:600px;">
<input type="button" value="Button!" style="float:right; width:100px;"/>
<span style="float:right"> Category </span>
<div class="inputRow">
<input type="text" id="input"/>
<div class="searchResults">
Results!
</div>
</div>
</div>
<div style="width:600px;">
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>
CSS:
.searchResults {
position:absolute;
top:100%;
background-color: white;
border: 1px solid black;
z-index: 50;
display: none;
}
.inputRow {
position:relative;
overflow:auto;
}
input {
width: 98%;
}
div {
z-index: 0;
}
JS:
$("#input").change(function() {
$(".searchResults").show();
});
It seems you need to use position fixed instead of position:absolute, and assign top:7% it will work. It's a way around. Still can't figure out why position:absolute is not working. I'm yet in the learning phase.
.searchResults {
position:fixed; /* instead of : position:absolute;*/
top:7%; /* instead of : top:100%;*/
background-color: white;
border: 1px solid black;
z-index: 50;
display: none;
}
Fiddle here : https://jsfiddle.net/nithin_krishnan/dowxw1dz/5/
The solution was simply to ignore the input element, and put the results in the content below the input, instead.
Unfortunately, that meant that setting the width had to be done in JavaScript instead of simply relying on CSS to do the right thing. I ended up using $(".searchResults").width($("input").width()) in order to make the width of the results match the width of the input. (And I removed the top: 100% from the .searchResults CSS class.)
https://jsfiddle.net/dowxw1dz/7/
<div style="width:600px;">
<input type="button" value="Button!" style="float:right; width:100px;"/>
<span style="float:right"> Category </span>
<div class="inputRow">
<input type="text" id="input"/>
</div>
</div>
<div style="width:600px; position:relative;">
<div class="searchResults">
Results!
</div>
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>
Is it possible to have a absolute-positioned, transparent div overlaying a series of divs that are clickable? I want to be able to hover over the red divs underneath in order to get a response.
<style type="text/css">
#holder{
width:200px;
height:200px;
}
.clickMe {
width:100px;
height:100px;
cursor:pointer;
background-color:red;
border:1px solid black;
float:left;
margin:-1px;
padding:0;
}
.hidey {
position:absolute;
top:0;
left:0;
z-index:50;
height:50%;
width:50%;
opacity:.25;
background-color:black;
}
</style>
<div class="hidey"></div>
<div id="holder">
<div class="clickMe"></div>
<div class="clickMe"></div>
<div class="clickMe"></div>
<div class="clickMe"></div>
</div>
Pointer-events can solve your problem. Pointer-events are supported in Firefox 3.6+, Safari 4 and Google Chrome so far (see compatibility table).
Because the top div will consume the mouse action the only way to do what you want (of which I'm aware) is to make the top div take an onClick action, then make a javascript function to pass that click to the divs underneath.
See this answer for details:
Trigger a button click with JavaScript on the Enter key in a text box
Your function will be a bit more involved, as you'll need to get the mouse position as well and use that to decide which box you're clicking.
See the second answer here for how to do that.
How do I get the absolute position of a mouse click from an onClick event on the body?
EDIT: SORRY, you said hover, not click. Make that onHover action, and pass a hover action, instead of a click. Same general idea though.
Let me suggest the simple old school method rather than going to any length to make this work.
Rather than the current structure of having a single wrapper around the inner elements, just give the individual elements a wrapper and put the event on those wrappers to find the child element.
I.E. rather than this:
<div class="wrapper">
<div class="clickMe">
...
</div>
<div class="clickMe">
...
</div>
</div>
Use this:
<div class="wrapper">
<div class="clickMe">
...
</div>
</div>
<div class="wrapper">
<div class="clickMe">
...
</div>
</div>
You'll have some extra markup in your HTML, but in my opinion, this could be preferable to the lengths you will need to go to make the current markup work. Just because new tech exists, doesn't mean it's the best tool for the job.
I am trying to put social buttons facebook and tweetmeme in our site. I liked the way it's done in yahoo sites. Please look
Yahoo Link
I looked at yahoo code, but the implementation style is very difficult to understand. It would be great if someone can help me in html/css coding.
Thanks.
Update
This is the code I have so far.. The issues I am having is Yahoo customized the css by changing the facebook and tweetmeme css behavior. Please check the attached image and compare with it. The code I am using is
<a name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a><script
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<script type="text/javascript">
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Please let me know, can we have exactly they have. I liked the look and feel of that. :)
Thank You.
I solved this for http://www.easynda.com using tips from http://neilgoodman.net/2012/01/14/making-social-buttons-line-up-in-a-row-in-css/ and some refinements.
I started by trying to use margins or padding in CSS to adjust the position of the social buttons, but that didn't work. Each button has slightly different margins and padding, which meant my adjustments never worked right and didn't look the same across browsers.
What's needed is to be able to accommodate the variation between buttons and to get them to stay where I put them in my HTML. The solution to is using floats. Max Design has a nice tutorial on floats with examples here: //css.maxdesign.com.au/floatutorial/introduction.htm.
Following the tips from Neil's site got me to here - but with clear problems.
(I'd post an image, but don't have enough reputation points yet).
The LinkedIn button sits at the top of its DIV while the FB buttons sits in the middle of it's DIV as seen in the first image. There are a couple of issues to note:
a: the FB share button width is minimum 90px per //developers.facebook.co.... All well and good, however, the width is dynamic based on the number of shares one has.
b: there is no margin between the FB share and LI share button -
c: the LI share button needs more width, and dynamic width as it will get it's own count as time goes on.
c: 20 px height is not enough for FB - even thought the FB button is only 20px, the JS adds pixels above the visible button. Also note that the bottom of the count bubble is cut off
d: and most obvious of all, the vertical positioning with LI riding high.
I solved the problem by floating a container holding the buttons with a line-height if 1 and using some CSS to float the buttons displayed inline with a min width, min height, and left padding.
The results are what was live as of the date of this posting (again, need reputation points to post images and more than two links)
Here is my HTML and CSS:
<div class="social-button-container" style="position: relative; z-index: 999;">
<!-- Facebook -->
<div class="social-button fb-like" data-href="http://easynda.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
<!-- LinkedIn -->
<div class="social-button">
<script type="IN/Share" data-url="http://www.easynda.com" data-counter="right"></script></div>
<!-- Twitter -->
<div class="social-button">
</div>
<div style="clear: both;"></div>
</div>
.social-button-container {
/*background-color: red;*/
/**
* This is a nice CSS trick that allows you to clear an element
* without having to add extra elements to your HTML. This helps
* separate content from design, which should always be an architectural
* goal.
*/
float: left;
line-height: 1;
}
.social-button {
float: left;
min-width: 100px;
display: inline;
min-height: 22px;
padding-right: 5px;
}
They are using an unordered list at the elements to show the buttons.
A UL is mostly used to show a list of items vertically but you can use CSS to make the items appear next to each other instead.
<ul>
<li style="display:inline">One</li>
<li style="display:inline">One</li>
</ul>
I think the above would work ok.
All you need to do then is right align it.
<div style="width:400px">
<ul style="float:right">
<li style="display:inline">One</li>
<li style="display:inline">One</li>
</ul>
</div>
Don't forget to use classes instead of inline styles like I have here.
Well, you basically just have to deal with the fact that one is an inline (a) element, the other a block (iframe) element, after that it becomes quite easy, just test that:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#fb_share, iframe {
display: block;
float: left;
line-height: 2em;
margin: 0 1em 0 0;
}
</style>
</head>
<body>
<a id="fb_share" name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
<script>
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js"></script>
</body>
</html>
Put your social media buttons into parent divs and give those divs an id each.
Target the inner iframe elements, e.g:
#fblikeblock iframe, #gplusblock iframe {
vertical-align: top !important;
}
where fblikeblock and gplusblock are the parent divs.
and use this on your parent divs:
#fblikeblock, #gplusblock {
display: inline !important;
position: relative;
zoom: 1;
}
I have 3 links that represent the content for one iFrame in my page. When you click each link, it'll reload the contents of that iFrame without reloading the page.
how do i set the image of my link to change when it's active?
here's my code:
<div id="tabs">
<div id="overview">
<a id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
<div id="tabs-1">
<!--<div id="scroller">-->
<iframe name= "tabsa" width="95%" height="100%" frameborder="0"></iframe>
</div>
CSS code:
#gallery a {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/GalleryTab.png) no-repeat;
height: 51px; width: 123px; position: absolute; z-index: 2;
}
#gallery a:active, a:hover {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/galleryoverview.png) no-repeat;
height: 51px;
width: 123px;
position: absolute;
z-index: 2;
}
it doesn't seem to work.. :o i only see the change in image when i hold the mouse down on the link, but when i click it, the image remains the same as if it wasn't the active tab. :o thanks!!
I am not seeing a style for visited? Only active and hover.
add
#gallery a:visited{}
style and see if that helps.
But I wonder if that is what you are actually asking? You may want to link to be displayed differently from the other links if its the last link that the user clicked. To do that you may have to use some javascript.
For example, if you use jQuery you can do something like this:
$("#gallery a").click(function(){
$("#gallery a").removeClass("ActiveClass");
$(this).addClass("ActiveClass");
});
where ActiveClass is a CSS class for styling the link appropriately.
EDIT based on comment below.
Let us assume that you have three links that look the same (call that lookA). You click on one and it looks different from the other two (lookB) but the other two still looks the same (lookA). You then click on a second link. The second link is not lookB and the other two links are lookA. Does this sound like what you want? At least that is how I interpret your question.
Hence, create two classes in CSS:
.lookA {/*Style for lookA*/}
.lookB {/*Style for lookB*/}
of course you can use more meaningful names.
Then you can add a class to each of the links that you need to use in this scenario like this:
<div id="tabs">
<div id="overview">
<a class="imagelink lookA" id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a class="imagelink lookA" target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a class="imagelink lookA" target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
So that each link can be refered to by its class, that is, imagelink. Also each link has a default lookA.
Now in jQuery (I know you did not specify jQuery but using it is 100 times simpler than plain Javascript).:
$(document).ready(function(){
$(".imagelink").click(function(){
$(".imagelink").removeClass("lookB");
$(this).addClass("lookB");
return true;
});
});
So on click on the link, it removes lookB from any other link and applies it only to the clicked link.
Hope this helps a bit.
I believe the selector is:
#gallery a:focus {...}
This is (inevitably) applied variably across browsers, however.
Stu Nicholls has a demo over on CSS Play, this demo being to remove the default outline of the focussed element, and otherwise style the clicked element.
Presumably this would be more reliably effected with jQuery, but it can be done with CSS.
I'm trying to create a "workflow" bar on a web page.
The items in the workflow might be of different lengths.
There might be enough items to fill the width of the screen, hence the flow needs to wrap onto the next line.
I'm using left floating divs to do this.
However, I'd like the divs to take an appropriate amount of screen width.
If only three items can fit on one line, then I'd like those items to fit evenly on the line, taking into account each individual items width.
All I can get at the moment is for the final div on a line to fill up the remaining space, which often means my items are all left aligned, e.g. I can get a layout like this:
AAAA -> BBBBB ->
CCCCCCCCCCCCCCCCCCC -> DD -> EEE ->
FFFFF -> GGGG -> HHHHH
but I actually want it to look something like this:
AAAA -> BBBBB ->
CCCCCCCCCCCCCCCCCCC -> DD -> EEE ->
FFFFF -> GGGG -> HHHHH
if you see what I mean.
Do I need to use tables for this rather than floating divs?
just a couple of other pointers. You should not have empty li tags, that is not semantically correct. Also in an ideal world you should not give id attributes layout names.
Personally I'd place the starting image on the ul and then place the closing image on the last li.
could probably do with seeing the surrounding markup to understand what elements you have in place. You could try having a surrounding div with margin: 0 auto;
You're probably going to need a surrounding div for each level.
Don't waste your time just go here:
http://www.cssmenubuilder.com/build-breadcrumb-menu
Thanks for the prompt responses. I'll try out what you are suggesting.
I'm currently trying to do this using a list, although I also got nowhere with divs.
I've tried pulling some HTML of my JSPs in order to try and demonstrate where I'm up to with this.
The spans have a class of "navigation" which basically draws a background image around the text to make it look like a button, as well as setting margins/paddings/etc. I've omitted the CSS which is directly related to the button drawing, since this is standard framework stuff in our system to draw a button. I have included the CSS which I'm using which is directly related to the workflow.
I'm trying to draw a starting image before the first button and then draw background images behind each button in order to draw a line between each button to represent the flow. I've then got an ending image at the end of the flow.
<html>
<body>
<STYLE>
#nav, #nav ul {
list-style: none;
margin: 0px;
width: 700px;
}
#nav li {
list-style: none;
float: left;
padding-left: 10px;
padding-right: 10px;
width: auto;
background-image: url(/lookandfeel/images/navMenuDiv.gif);
background-repeat: repeat-x;
}
li#ending {
background-image: url(/lookandfeel/images/navMenuRight.gif);
background-repeat: no-repeat;
}
li#start {
background-image: url(/lookandfeel/images/navMenuLeft.gif);
background-repeat: no-repeat;
}
.navigation a {
background-image: url(/pdr/images/navigation.gif);
}
</STYLE>
<ul id="nav" style="width: 100%;border: 1px solid">
<li id="start" />
<LI >
<SPAN class="navigation" >AAAAAAAAAA</SPAN>
</li>
<LI >
<SPAN class=navigation >BBBB</SPAN>
</li>
<LI >
<SPAN class=navigation>CCCCCCCCCCCCCCCCC</SPAN>
</li>
<LI>
<SPAN class=navigation>DDDDDDDDD</SPAN>
</li>
<LI>
<SPAN class=navigation>EEEEEEEE</SPAN>
</li>
<LI>
<SPAN class=navigation>FFFFFFFFFFFFFF</SPAN>
</li>
<li>
<SPAN class=navigation>GGGGGGGGGGGGGGGGGGGGGGGGGGGGG</SPAN
</LI>
<li id="ending" />
</ul>
</body>
</html>
Setting the li elements to display: inline, and giving the ul a text-align: justify property will get you part way there (in FFX3 and IE7 at least). However, it does raise some complications when applying the background images.
As much as I dislike to say things can't be done, I think I have to agree with #johnners on the surrounding element for each navigation level. Even if you were to use table layout CSS you would need some sort of surrounding element for each 'row' in order to get the spacing on the left and right correct.