Hi i am currently making a demo site from just pure html/css/javascript usually i would be using ruby and just rendering partials to solve this issue but to get some practice with javascript i though this might be an interesting challenge, and it has been! so what i have made is a block of code that has an image that is word wrapped with text. and i have positioned buttons either side of the block of content. my objective is to have those buttons hide until mouse over and onclick the content with the image will rotate to a a different image and description. and those blocks of collections will be grouped into tabs. for for instance on the home tab there will be four collections of content i could rotate through them, then the next tab would be products and if i clicked on that tab there would be three collections of content one for each product, and each would contain an image and a description..
cool so what i have so far is this here is my html:
<div class='content'>
<div class='box'>
<ul id="navigation">
<li class="two">Home</li>
<li class="three selected">Products</li>
<li class="four">Technology</li>
<li class="five">Cosulting</li>
<li class="six">Contact</li>
</ul>
<div id="sub_content">
<div class='title'>
<h3> Home </h3>
</div>
<div class="clear"></div>
<div class="arrow">
<a id="left" href=""><img src="/home/***/HTML/launch_pad/images/lefta.png">/a>
<a id="right" href=""><img src="/home/***/HTML/launch_pad/images/righta.png"></a>
</div>
<div class="clear"></div>
<div id="wall">
<div class="hide">
<div class="description">
<img id="demoimg" src="/home/***/HTML/launch_pad/images/productivity.png" alt="demo pic">
<h2>Who are we?</h2>
<p>a super hero organization fighting evil all day long!! .</p>
</div>
#the description class is then repeated each with a unique image and new info in the <h2> tags and the <p> tags..
i have found several things that i have found online that have been helpful but i have conflicting javascript lib errors. so i am using the so that i can use the easing 1.3 library and for the twitter widdget i am using.
my css looks like this:
.content {
margin-left: 5%;
margin-right: 5%;
width: 1400px;
}
.box {
float: left;
width: 950px;
margin-left: 20px;
position: relative;
}
#sub_content {
background-color: white;
width: 720px;
max-height: 462px;
min-width:600px;
margin: 0px 0px 0px 40px;
padding: 15px;
border: solid 1px black;
border-radius: 8px 8px 8px 8px;
overflow-y: auto;
}
.title {
text-align: right;
text-transform: uppercase;
border: 1px solid yellow;
margin: 0px 25px 5px 25px;
padding: 5px;
}
#wall {
min-width: 300px;
margin:0px 0px 15px 15px;
width:655px;
border: 1px solid red;
float: left;
padding: 5px;
}
.description {
margin: 0px 0px 10px 10px;
padding: 5px;
width: 630px;
border:1px solid green;
float: left;
}
#decription p {
word-wrap: break-word;
}
#demoimg {
float: left;
margin: 16px 8px 0px 0px;
height: 200px;
width: 200px;
}
EDIT:
this is the javaScript i was trying:
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
slides: 'description',
duration: 1500,
buttons: {next:'right',prev:'left'},
transition: Fx.Transitions.Quint.easeOut
}
var scroller = new QScroller('content',opt);
scroller.load();
});
//-->
</script>
but this doesnt seem to work i have a file with all my javascript in my directory that i link to..
the one that has come really close is at http://www.latenight-coding.com/mootools/classes/qscroller.html under Horizontal scroller with text and images. but it doesnt work!! which makes me pull out my hair. is there another way to just loop through the description and hide the ones that arnt selected??
any help or a better reference's would be much appreciated :D
You might consider using Jquery Cycle. It is an OUTSTANDING plugin that uses easing, and will allow you to have both a description of your content and prev/next buttons or links. You can also have multiple slideshows on one page, and it is probably not a hair-puller to have a link to one slideshow open up several, as this seems to be what you are looking for.
It works pretty easily out of the box and is highly customizable. The website has a ton of examples with code.
Related
I am currently working on a project and I want to display something similar to Apple's stocks app, how a single row has a name followed by a current number and then a +- indicator of how much the stock either went up or down from before. I really like this row design against a black background and think its easily readable, so that's why I want to do it. At the moment I am trying to create a single row of HTML combined with CSS that will give me this kind of look and feel, a custom list item if you will.
I have the positive\negative indicators made but cannot figure out how to space and include text to the left of this element within the same list item row. Ideally, the layout should be something like this:
STOCKNAME PREVTOTAL STOCKPOSORNEG
All of these fields should be in the same list item row. Since I've had some trouble with this approaching using the un-ordered list I could also explore a table option but wanted to see if there was a way it could possibly be done that way first. Below is what I was experimenting with via the TryIt Editor:
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 7px;
background: #80ff80;
padding: 20px;
width: 90px;
height: 10px;
color: #FFF;
}
#makeLeft {
float: left;
}
#makeRight {
float: right;
}
#listitem {
list-style: none;
background-color: black;
border: .5px solid #efeff5;
padding: 1px;
}
</style>
</head>
<body>
<ul id="mylist">
<li id="listitem">
<p id="rcorners1">
<span id="makeLeft"><strong>+</strong></span>
<span id="makeRight"><strong>1234.00</strong></span>
</p>
</li>
</ul>
</body>
</html>
How does this work out for you?
I tried to get it as close to the original stocks app as possible. Some of the font sizes might be a bit off, but this is probably as good as you're going to get.
span{
font-family: arial;
font-size: 24px;
color: #fff;
}
.container{
width: 400px;
height: 200px;
background: #040404;
}
.row{
position: relative;
width: calc(100% - 20px);
height: 29px;
padding: 13px 10px 13px;
}
.row.highlighted{
background: #383838;
}
.name{
float: left;
}
.price{
display: inline-block;
margin-right: 3px;
}
.pn{
padding-right: 5px;
}
.pn-con{
position: absolute;
top: 10px;
right: 10px;
}
.main-pn{
display: inline-block;
height: 29px;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
border-radius: 5px;
background: #FD3C2F;
}
<div class="container">
<div class="row">
<span class="name">DOW J</span>
<div class="pn-con">
<span class="price">18,109.80</span>
<div class="main-pn">
<span class="pn">-</span>
<span class="val">53.19</span>
</div>
</div>
</div>
<div class="row highlighted">
<span class="name">MSFT</span>
<div class="pn-con">
<span class="price">47.58</span>
<div class="main-pn">
<span class="pn">-</span>
<span class="val">0.04</span>
</div>
</div>
</div>
</div>
Here's a working JsFiddle for it!
It's pretty customizable, all you need to do is copy & paste the rows, and alter the values within the spans!
Here's an image of the actual stocks app for reference!
Hope it helps! :-)
I've got 3 LI with class=box and they are styled with overflow hidden. I need to create a DIV with class=badge inside one box (in this case the 3rd/blue box).
My objective is:
1. that this badge DIV (set as position absolute) follows or can use as reference the relative position of that particular box.
2. that this yellow badge DIV can be displayed outside of the blue box.
I have been trying a lot of things to make this mission impossible code, but I was wondering if anybody here has already done this before.
Preferred solution: Javascript or jQuery and workable in IE8 if possible if not at least IE9.
HTML:
<div class="container">
<li class="box" style="background-color: red;">
red
</li>
<li class="box" style="background-color: green;">
green
</li>
<li class="box" style="background-color: blue;">
<div style="background-color: #ff0;" class="badge">badge</div>
blue
</li>
</div>
css:
.container {
border:1px solid black;
width: 500px;
height: 120px;
margin: 20px auto 0px;
background-color: grey;
}
.badge {
position: absolute;
width:100px;
height: 100px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
bottom: -55px;
}
.box {
float: left;
width:100px;
height: 100px;
border: 1px solid black;
margin: 10px; 5px;
text-align: center;
vertical-align: middle;
position: relative;
/*overflow: hidden;*/
}
NOTE: overflow hidden code is commented, for you to see the output I need to have.
I have a jsfiddle here for quick reference: http://jsfiddle.net/philcyb/1m73qewm/
You could try something like this:
var $badge = $('div.badge'),
xOffset = $badge.offset();
$badge.appendTo('body').css({
top: xOffset.top,
left: xOffset.left
});
You probably need to add scrollTop() and the like too.
So the simplest solution that is supported by what you require would be to add another parent that does your clipping for you.
Simple have the structure such as .box > .box-inner > text + badge
An example of how that would look for your blue box would be.
<li class="box" style="background-color: blue;">
<div class="box-inner">
Blue
</div>
<div style="background-color: #ff0;" class="badge">badge</div>
</li>
The CSS for the inner box would be
.box-inner {
width:100%;
height:100%;
overflow:hidden;
}
I have updated your fiddle with what that would look like.
FIDDLE
http://jsfiddle.net/1m73qewm/12/
HTML:
<li class="box" style="background-color: blue;">
<div style="background-color: #ff0;" class="box">badge</div>
blue
</li>
CSS:
.box {
float: left;
width:100px;
height: 100px;
border: 1px solid black;
margin: 10px; 5px;
text-align: center;
vertical-align: middle;
position: relative;
overflow: hidden;
}
I presume this is what you mean't ! Just see the changes in the above code.
Elements within clickable h2
Introduction
I am creating a one-line menu in html. I have 3 options that work in a really similar way. The problem is that the one that has the html right, looks like it can fail more easily. I put the 3 examples here. I am looking for reliable, browser-compatible menu. The third option uses javascript so I don't really love it.
The menu has to be 100% width, within a gray rectangle and has to have some text at left and some at right. The entire menu has to be clickable with only one hyperlink. This is what I have tried so far:
Implemented examples
A link to see them all working is here (DISCLAIMER: yes, it is my own webpage). If you don't feel like clicking there, here's an image of how they look in the same order as the options:
Option 1.
This one is no html compliant, but I've found is the one more logical, it behaves better in general and it's not likely to give many troubles:
<a href="http://newfutureuniversity.org/test/hblock.php">
<h2 style="width:100%; height:100%; border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
Hello world
<span style="margin: 6px; color:gray; font-size: 15px; float:right; ">
Right text
</span>
</h2>
</a>
Option 2.
This one is html compliant, but I just hate to center things using pixels. I feel like it will break really easily. Besides, the text in the right is not fully clickable:
<h2 style="border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
<a href="http://newfutureuniversity.org/test/hblock.php" style="width:100%; height:100%; display:block;">
Hello world
</a>
<span style="position: relative; right: 6px; top:-23px; color:gray; font-size: 15px; float:right; ">
Right text
</span>
</h2>
Option 3.
This one uses javascript. I prefer not to bloat every menu like this one with javascript and to use html/css is available, but this is another option. It doesn't get the color that regular links do.
<h2 onclick="location.href='http://newfutureuniversity.org/test/hblock.php';" style="cursor:pointer; display: block; width:100%; height:100%; border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
Hello world
<span style="margin: 6px; color:gray; font-size: 15px; float:right; ">
Right text
</span>
</h2>
Question
Which one do is more browser compatible and unlikely to break? Do you have any other recommendation or improvement? Any feedback will be appreciated
PS, all the inline CSS will be put apart in a different css sheet.
I'd suggest that the better approach is to reorganise your HTML, to the following:
<h2>
Hello world<span>Right text</span>
</h2>
And then use the following CSS:
a {
display: block;
padding: 0.2em;
width: 80%;
margin: 0 auto;
border: 1px solid #000;
background-color: #aaa;
}
a span {
color: #000;
float: right;
text-decoration: none;
font-size: 0.8em;
padding-top: 0.2em;
}
JS Fiddle demo.
The validity of this depends on the elements you want to ultimately place within the h2 tag to remain clickable, though. Under HTML5 it's valid to nest block-level elements within an a tag, under HTML4, though, while it still seems to work it's not considered valid, according to the doctype.
But, for the posted requirements this seems to work; albeit it does require the restructuring of your HTML, which may not be possible. However:
it is valid HTML,
it's resistant to breaking (unless the content of the span exceeds a given width,
it doesn't rely on arbitrary px adjustments (albeit it does use padding to vertically centre the resized text within the a),
it doesn't require JavaScript
Edited to amend the CSS a little, to account for the potential for the right-floated text to become large enough to overflow to the next line, by simply adding overflow: hidden to the a element's CSS:
a {
display: block;
padding: 0.2em;
width: 80%;
margin: 0 auto;
border: 1px solid #000;
background-color: #aaa;
overflow: hidden;
}
JS Fiddle demo.
You could also, of course, add a max-width to the span:
a span {
color: #000;
float: right;
text-decoration: none;
font-size: 0.8em;
padding-top: 0.2em;
max-width: 80%;
}
JS Fiddle demo.
I agree with David Thomas on his mark up. Although I would alter the css slightly in order to make it more robust. If you resize your browser so that the right span gets pushed below the left text (make the browser smaller), then you'll see that the clearing properties that I have applied mean the a stays wrapped around the span rather than allowing the span to move outside of the a area.
HTML:
<h2 class="item ">
<a href="#" >Loads of left left Left Text<span>Right Text lots more</span></a>
</h2>
CSS:
.item a {
zoom:1;
border: 1px solid #666;
background: grey;
display: block;
}
.item a:before,
.item a:after {
content:"";
display:table;
}
.item a:after {
clear:both;
}
.item span {
background: green;
float: right;
}
DEMO:
http://jsfiddle.net/Vc3DA/
I have two divs that I want to show one and hide the other continuously. The code I have only shows the first one Mass_alert. What must I fix to show and hide both divs in turn.
Here is the HTML.
<div style="position: relative; top: 50px; width: 778px; margin: 0 auto;">
<div id="alerts" style="float: right; width:200px; height: 25px; background: goldenrod; border-radius: 3px 3px 3px 3px; font: 11px Arial; color: #404040; overflow: hidden;">
<div id="Mass_alert" class="alert" style="position: relative; top: 5px; margin: 0 auto; text-align: center; width:100%; height: 20px;"></div>
<div id="Devotion_alert" class="alert" style="position: relative; top: 5px; margin: 0 auto; text-align: center; width:100%; height: 20px; visibility: hidden;"></div>
</div>
</div>
The code to do the fade toggle is this one.
$(document).ready(function() {
show_next_Mass(channel_array_sort);
show_next_devotion();
setInterval("show_alerts()",10000);
var continuous = function () {
$("#Mass_alert").fadeToggle(600);
$("#Devotion_alert").fadeToggle(600);
};
setInterval(continuous,600);
});
Judging by this API doc, you need to use display: none; instead of visibility: hidden; for the hidden element.
When you watch what .fadeToggle() does you see the change to the following attributes
opacity: 0;
display: none;
(As also Alexander pointed out in his answer.)
So I've copied this to the style attribute for the second div. But it didn't work. My assumption is jQuery keeps in some way track of what it has done to the elements but not really recognise the initial CSS.
My idea is that jQuery somewhat keeps track of what it has done to the elements but not really recognise the style the HTML came already with. So I cleaned 2nd div's CSS from any hiding related attributes and put a .hide() in the "initialising function".
seems to work (#jsFiddle)
i am working on a mock up site with some functionality. i am working with html css and js. i am using the cycle plugin to cycle through some tabs that i have made up. ill post my code then explain what i am trying to do:
my html:
<div id="content">
<div id="image_selector" class="image_selector">
<div class ="image">
<ul>
<li><a id="Mpowered" href="">Mpowered</a></li>
<li><a id="Technology" href="">Technology</a></li>
<li><a id="Consulting" href="">Consulting</a></li>
<li><a id="Outsourcing" href="">Outsourcing</a></li>
</ul>
</div>
</div>
<div class="cell">
<div class="description">
<img id="demoimg" src="/home/***/HTML/launch_pad/images/productivity.png" alt="demo pic"/>
<h2>Who are we?</h2>
<p> a consulting company... ect</p>
</div>
<div class="description">
<img id="demoimg" src="/home/***/HTML/launch_pad/images/tech1.jpg" alt="tech"/>
<h2>We have the tech!</h2>
<p> lots of tech!!.... ect</p>
</div>
... there are two more description sections one for each of the "a" tags i have now made as tabs.
the css looks like this:
.image_selector {
border: 1px dotted green;
height: 130px;
}
.image li {
float: left;
border: 1px solid white;
height: 100px;
width: 103px;
margin-left: 86px;
overflow: hidden;
text-align: center;
}
.image li a {
padding: 74px 0px 0px 0px;
color: white;
text-shadow: 0 0 0.6em #0197E8;
font-size: 17px;
letter-spacing: 1px;
text-decoration: none;
display: block;
height: 80px;
background-repeat: no-repeat;
}
.image li a:hover {
text-shadow: 0 0 0.6em #0197E8, 0 0 0.4em #0197E8, 0 0 0.6em #0197E8;
}
.image li #Mpowered {
background-image: url('/home/ruberto/HTML/launch_pad/images/mpower.png');
background-position: center top;
}
.image li #Technology {
background-image: url('/home/ruberto/HTML/launch_pad/images/tech.png');
background-position: center top;
}
.image li #Consulting {
background-image: url('/home/ruberto/HTML/launch_pad/images/consulting.png');
background-position: center top;
}
.image li #Outsourcing {
background-image: url('/home/ruberto/HTML/launch_pad/images/outsourcing.png');
background-position: center top;
}
.cell {
border: 1px dashed green;
height: 318px;
width: 715px;
float: left;
}
#demoimg {
float: left;
position: static;
margin: 16px 8px 0px 0px;
height: 200px;
width: 200px;
}
and the javascript iam using:
$('.cell')
.before('<div class="image">')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '.image'
});
so i have read up on line and now understand that the pager option will now create its own navigational section just above the div that has the content that i want to rotate through. i was wondering is there a way i can just reference the "image" tag i have set up as my "tabs" for the navigational function for the cell class??
if there is no way can anyone recommend something that could work in its place?
Assuming you want to reference or even map those li's to other functionality or even build another referencable pager, which what it sounds like you might need to do, you're probably going to need .index to provide a reference for those pair connections.
To start a duplicate pager, clone those elements somewhere else, then maybe simply use css to not display the original, BUT leave it in place so that cycle can use it for paging
// create secondary menu
$('#pager').find('li').clone().appendTo('#navpage ul');
Then if you want to pair your two pagers start with this functionality
http://jsfiddle.net/moneylotion/KhL3W/