My problem is that I was creating a simple website the other day and I needed the content to move according to the button pressed.
I managed to do so in CSS3, but the solution did not work for IE whatsoever. Therefore I would like to ask if there is a simple solution for that in js? I don't know js at all but I heard what I need is much easier in js than in css.
Details:
http://i42.tinypic.com/6yl4ia.png
I need the table in the picture to move according to the buttons (which are labels to be exact).
The visible area is a div.
Here's the relevant code (without animation as I was not satisfied with it):
body {
background-color: #fff;
color: #fff;
padding:0px;
}
#bodywrapperfixed {
width: 1248px;
margin: 0px auto;
position: relative;
overflow: hidden;
height: 730px;
}
#bodywrapper {
display:block;
background-color: #fff;
width: 1248px;
color: #59595B;
padding-top:50px;
font-family: 'Roboto', sans-serif;
position: absolute;
top:0px;
left:0px;
z-index:1;
font-size: 60px;
height:730px;
}
#bodywrapper img {
width:400px;
padding:15px 0px 20px 0px;
}
#texten {
font-family: 'Roboto', sans-serif;
font-size: 35px;
padding:5px;
}
#textpl {
font-family: 'Roboto', sans-serif;
font-size: 25px;
padding:5px;
}
table#linki {
width: 110px;
border: none;
margin-top:15px;
}
label {
display: block;
height: 54px;
width: 54px;
color:#fff;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 35px;
background-color: #117D10;
text-align: center;
padding:23px;
}
label:hover {
background-color: #004F00;
cursor: pointer;
}
input#pl {
position: absolute;
top: -9999px;
left: -9999px;
}
input#en {
position: absolute;
top: -9999px;
left: -9999px;
}
and the relevant HTML:
<div id="bodywrapperfixed">
<div id="bodywrapperfloat">
<table id="ramka">
<tr>
<td>random text</td>
<td><div id="bodywrapper">
<center>
<div id="texten"><div style="font-weight:300; display:inline-block;">Introducing the all-in-one entertainment system.</div><div style="font-weight:500; display:inline-block;"> For everyone.</div></div>
<div id="textpl"><div style="font-weight:300; display:inline-block;">Przedstawiamy zintegrowany system rozrywki.</div><div style="font-weight:500; display:inline-block;"> Dla wszystkich.</div></div>
<img src="imgs/xboxone.png">
<div id="texten"><div style="font-weight:300; display:inline-block;">Choose your version of the story:</div></div>
<div id="textpl"><div style="font-weight:300; display:inline-block;">Wybierz swoją wersją opowieści:</div></div>
<table id="linki">
<tr>
<td><label for="en">en</label><input id="en" type="checkbox"></td>
<td><label for="pl">pl</label><input id="pl" type="checkbox"></td>
</tr></table>
</center>
</div></td>
<td>random text</td>
</tr>
</table>
</div>
</div>
Here's what it looks like:
http://ingame.lh.pl/thinkone/
Please help me.
CSS3 Transformations will not work in IE9 and below since they simply don't support it. If you need to do transforms and the like then one of the many options available is jQuery.
jQuery is a JavaScript Library that simplifies your use of JavaScript and makes DOM Manipulations like transformations and animations simpler. They have a number of great demos on their website that should help you get started. I would recommend having a look at their own JavaScript 101 which will help you get started with the basics of JavaScript itself (without jQuery) and then lead you into making your life easier with jQuery.
For specifically what you are after (what I assume you are after anyway) you may want to have a look at their events tutorial (attaching click handerls to elements etc.), css styling tutorial (CSS 'Getting, Setting and Manipulations') and the effects tutorial (Attaching effects to elements).
I hope this helps get you started in the world of JavaScript and jQuery. Note that many other libraries exist, but this one is the one you will see the most of everywhere.
Hope this helps..The code contains a table and buttons as you depicted in the picture
http://jsfiddle.net/ramanbedi/vDdJL/
here is the js code:
$(function(){
$(".left-button").on('click',function(e){
e.preventDefault();
$(".table").animate({left:'-=10'},500);
})
$(".right-button").on('click',function(e){
e.preventDefault();
$(".table").animate({left:'+=10'},500);
})
})
I have used jQuery library and reasons are mentioned in the comments.
Related
I'm a beginner web developer creating my first personal portfolio page. I'm trying to use this particle container as a sort of background hero "video."
Codepen.io - https://codepen.io/erikterwan/pen/VpjVvZ
HTML:
<div id="fps"></div>
CSS:
html, body {
margin: 0;
padding: 0;
}
#fps {
position: absolute;
bottom: 5px;
right: 5px;
font-family: sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #fff;
color: rgba(255,255,255,0.5);
z-index: 2;
}
I'll omit the JS for now since it's pretty long, but it's there in the Codepen if you want to take a look (and see what the particle container actually looks like).
I've been trying to overlay an image and text over the container (like my picture with my name under it), but they either just go above or under it, or disappear entirely (I assumed behind it).
My HTML:
<div class="container-fluid">
<div id="fps"></div>
<div class="row">
<div class="col-lg-3 col-lg-offset-4">
<img id="profile-image" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
</div>
</div>
My CSS:
html {
font-family: 'Raleway', sans-serif;
}
/* Navbar Stuff Here */
#fps {
color: #fff;
color: rgba(255,255,255,0.5);
z-index: 2;
}
#profile-image {
border-radius: 100%;
height: 150px;
background-color: yellow;
}
I haven't modified any of the JS.
Would really appreciate if anyone could give some insight or point me in the right direction to figure out this problem!
You just have to absolutely position your <div>:
.container-fluid{
z-index:1;
position: absolute;
}
I have hover effects I am using that work great for desktop but need them to work on mobile devices as well. I tried to follow a Youtube video on adding iosTouch with mootools to allow a hover like effect for ios devices. I am doing something wrong in my code and can't get it to work. I added the mootools to my head. Here is the rest of my code.
<div class="page" id="resume">
<div class="container-fluid">
<h2>Resume</h2>
<div class="row">
<blockquote class="col-sm-6" id="qualifications">
<div class="quote">
<span class="intro" id="iosTouch">Qualifications</span>
<span class="more">
<ul>
<li>Excellent communication skills, both oral and written</li>
<li>Ability to quickly learn and apply new technologies</li>
<li>8 years of experience developing curriculum for instructor-led, web-based and blended modalities</li>
<li>2 years of experience creating HTML web pages including the testing and debugging of code</li>
</ul>
</span>
</div>
</blockquote>
</div><!--row-->
</div><!--content container-->
</div><!-- resume page -->
The JS I added is:
//fix hover events for ios
$("iosTouch").addEvents({
touchstart: function() {
$("iosTouch").addClass('more');
},
touchend: function() {
$("iosTouch").removeClass('more');
}
});
My CSS is:
#resume {
padding: 0;
border-top: 40px solid transparent;
}
#resume blockquote {
margin: 0;
padding: 0;
border-left: none;
min-height: 500px;
position: relative;
}
#resume blockquote .quote {
background-color: rgba(255,255,255,.8);
padding: 20px 5%;
position: absolute;
bottom: 0;
width: 75%;
font-weight: 400;
border-radius: 0 50px 0 0;
}
#resume blockquote .quote:hover {
background-color: rgba(255,199,96,.9);
}
#resume #qualifications {
background:url(../images/resume_qualifications.jpg) no-repeat center center;
background-size: cover;
}
#resume .quote .more {
opacity: 0;
font-size: 0;
line-height: 0;
padding-top: 10px;
}
#resume .quote:hover .more {
font-family: "Open Sans", sans-serif;
font-weight: 100;
display: block;
opacity: 1;
font-size: .8em;
line-height: 120%;
}
#resume .quote .intro::after {
content: '...';
}
#resume .quote:hover .intro::after {
content: '';
}
Any help you can provide is greatly appreciated
You're simply using the jQuery ($) function wrong. Replace $("iosTouch") with $("#iosTouch").
This is because jQuery attempts to emulate css selectors for getting DOM objects, and in CSS, # targets divs.
Without the # it implies that you want to perform the function on a tag called iosTouch.
I'm trying to create a expnd divs when user mouse over with Jquery and CSS.
My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:
HTML:
<div id="box">
<div class="inner" id="01">
<a href="#" class="block">
<span id="s01" class="s01">A</span>
</a>
</div>
<div class="inner" id="02">
<a href="#" class="block">
<span id="s02" class="s01">B</span>
</a>
</div>
</div>
CSS:
body {
background-color:navy;
}
#box {
height: 92px;
_height: 92px;
width: 290px;
_width: 270px;
float: left;
margin-left: 9px;
margin-top: 48px;
margin-bottom: 31px;
margin-right: 26px;
background-color: #FFF;
_overflow:hidden;
}
.inner {
height: 90px;
width: 141.6px;
_width: 121.6px;
background-color: #FFFFFF;
float: left;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #2DA2A8;
cursor: pointer;
z-index:0;
}
.s01 {
text-align: center;
display: block;
height:100%;
cursor: pointer;
padding-top: 36px;
}
.block {
color:#399;
}
JS:
$(document).ready(function(){
$("#01").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#01").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
$("#02").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#02").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
});
Probably the neatest way to solve this is to add position:relative to the divs, this will enable z-index to work.
If you don't do this, the divs are defaulted to position:static which ignores z-index, see: Why is z-index ignored with position:static?
There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
position:absolute would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.
Updated your fiddle: http://jsfiddle.net/ua444/1/
You already had a class on those divs so the only change is:
.inner {
position: relative;
}
I've forked and updated your fiddle.
The z-index and relative positioning should work:
http://jsfiddle.net/robertp/y48BD/
I removed the z-index manipulation from the JavaScript and used :hover state to change the z-index instead:
.inner {
...
position: relative;
}
.inner:hover {
z-index: 1;
}
I hope this is something you've been after.
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)