I have a div of thumbs and was wanting to change the innerHtml on click; however, whenever I insert something into them, they drop down and I am wanting them to remain in line.
Here is the jsfiddle:
http://jsfiddle.net/jtDzs/
For example, if I wanted to add "something" to the boogie div in:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<title>TITLE</title>
<style>
.thumbContainer {
width: 200px;
}
.thumb {
width: 95px;
height: 95px;
background-color: blue;
display: inline-block;
}
</style>
</head>
<div>
<div class="thumbContainer">
<div id="boogie" class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
<script>
(function() {
$(".thumb").bind("click", function() {
$("#boogie").html("something");
});
})();
</script>
</body>
</html>
For some reason using display: inline-block is causing this problem...
There are two simple solutions:
Overflow: hidden
You can add this line to your class:
overflow: hidden;
Here's the working jsFiddle Demo
Float: left
You can also start using floating to the left instead of display: inline-block and add the wanted margin.
// display: inline-block
float: left
margin: 2.5px;
Here's the working jsFiddle Demo
P.S I guessed you're trying to make this kind of behaviour to every div so I allowed myself to change the html changing command to:
$(this).html("something");
You can change this if you want
.thumb {
color: white;
width: 95px;
height: 95px;
margin: 2.5px;
background-color: blue;
float: left;
}
http://jsfiddle.net/jtDzs/9/
$(".thumb").on("click", function() {
$(this).append("something");
});
JSFIDDLE DEMO
(function() {
$(".thumb").on("click", function() {
$(this).("something");
});
})();
CSS is
.thumb {
color: white;
width: 95px;
height: 95px;
background-color: blue;
display: inline-block;
float: left;
margin: 2px;
}
Demo
Hope it helps
(function() {
$(".thumb").html(" ");
$(".thumb").bind("click", function() {
$("#boogie").html("something");
});
})();
.thumbContainer {
width: 200px;
height:100px;
}
http://jsfiddle.net/jtDzs/11/
Related
In this JavaScript example when user clicks on 'Change colors' button, it need to swap colors of two div elements. But it doesn't.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
background-color: red;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
background-color: green;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
But when I change it a little bit and remove 'background-color' from <style> and put it within <div> then it's working.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first" style="background-color: red;">Random text.</div>
<div id="second" style="background-color: green;">Random text.</div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
So is there any way to make it works for solution when 'background-color' is within <style> in <head>?
Element.style only applies to styles within the style attribute of the element. If you want the computed style, which factors in stylesheets and the like...
var firstElem = document.getElementById('first'),
secondElem = document.getElementById('second'),
firstBackground = window.getComputedStyle(firstElement).backgroundColor,
secondBackground = window.getComputedStyle(secondElement).backgroundColor;
firstElem.style.backgroundColor = secondBackground;
secondElem.style.backgroundColor = firstBackground;
This should swap the two colours, regardless of where they are defined.
For this case it whould be more common to use 3 classes in css. One for defining the common style of the divs. And two for defining the differences. Switching the appearance in that case whould just require switching of classes. Such a set-up is far more flexible also for example in combination with annimations.
A way to alter style using Javascript, without inline styling:
https://jsfiddle.net/6tyw211s/10/
<html>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
.color{
background-color: red;
}
.color1{
background-color: green;
}
</style>
<body>
<input type="button" id="color" value="Change colors" />
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
</body>
<script>
var y= document.getElementById('color');
var f=document.getElementById('first');
var s=document.getElementById('second');
y.addEventListener('click', function(){
if (f.className === "color1") {
f.className = "color";
}
else {
f.className = "color1";
}
if(s.className==="color"){
s.className="color1";
}
else{
s.className="color";
}
})
</script>
</html>
You can use switchClass() in jqueryui to do it.
That way, you don't have to specify the background-color values to the divs.
$("#color").click(function myFunction() {
$(".first").switchClass("first", "second", 200, "easeInOutQuad");
$(".second").switchClass("second", "first", 200, "easeInOutQuad");
});
Here is a working version with jqueryui
http://api.jqueryui.com/switchclass/
I've looked at other questions, with no success...
I'm just trying to keep the page scrolling slowly after load, follows the code:
CSS (Most of CSS is placed as embed files, this is just the styles applied to the content objects):
<style type="text/css">
.content {
width: 98%;
left: 1%;
margin-top: -10px;
}
.block_1 {
position: relative;
width: 18.5%;
height: 150px;
margin-left: 1%;
margin-top: 1%;
float: left;
background: #FFF;
border: 3px solid #999;
}
</style>
JS:
<script type="text/javascript">
$(function(){
$.slidebars({
siteClose: true
});
});
// Loading
$(document).ready(function(){
$(window).load(function(){
$('.loading').fadeOut(700);
});
});
$('html,body').animate({scrollTop: $('#end').offset().top});
</script>
HTML
<body>
<div class="loading">
<div class="loading_msg">Carregando dados, aguarde...</div>
<div class="loading_img"><img src="img/loader.gif" /></div>
</div>
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="300px"</div>
<div id="sb-site">
<div class="div_bg_header"><?php show_header_menu_dashboard($p_title); ?></div>
<div class="content" id="content">
<div class="block_1"></div>
<div class="block_1"></div>
...
<a id="end"></a>
</div>
</div>
</body>
Grateful
correct as
$(document).ready(function(){
$(window).load(function(){
$('.loading').fadeOut(700);
});
$('html,body').animate({scrollTop:$('#end').offset().top});
});
in your CSS please set some height to the body,
body {
height: 1500px;
}
and it will work well. current offset is just 16. so for visible scrolling
please add the following style.
#end {
margin-top: 500px;
display: block;
}
I am going to add dynamically elements to my block of ul.
I would like to center all list's elements to parent div(brown boder).
For example,
if the resolution of the browser allows you to set two blocks in one row, I would like to center this row in relation to parent div.
I would be very graftefully.
Link to demo
myCode:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var tab = [2,3,4,5,7,8,9,11,12,13,14,15];
$(document).ready(function(){
$('#godziny').on('click', '.godzina', function(){
//alert(this.attr('class'));
$('.yb').removeClass('yb');
$(this).addClass('yb');
});
$('#getElements').click(function() {
for(i = 0; i < tab.length; ++i) {
alert(tab[i]);
setTimeout(function(i){
$('#godziny').append('<li class="godzina">' + tab[i] + '</li>');
}, i*50);
}
});
});
</script>
<style>
#spisSalonow {
margin: 0 auto;
}
#spisSalonow > div {
padding-top: 15px;
color:red;
}
#wybor_terminu {
border: 1px solid brown;
}
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
border: 1px solid red;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
float: left;
cursor: pointer;
margin-right: 40px;
margin-top: 40px;
/*margin:auto;*/
/*
opacity: 0.4;
filter: alpha(opacity=40);
*/
}
.yb {
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="get Elements" id="getElements"/>
<section id="content">
<div class="full">
<BR/>
<div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
<div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" /> <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
<ul id="godziny" style="margin-top: 25px;">
</ul>
</div>
</section>
</div>
</body>
</html>
You can use the CSS flexbox to achieve this. Here is a link to a complete guide on how to use flexbox. I hope this helps.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this lines:
CSS
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
/*NEW*/
padding: 0;
width: 100%;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
/*float: left; You don't need this line*/
cursor: pointer;
/*NEW*/
margin:auto;
margin-top: 40px;
}
EDIT
This is only a quick solution with bootstrap maybe it could help you a little bit. jsfiddle
jQuery
In this line I added bootstrap classes:
$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');
This code center your boxes (is not the best solution, but it works):
countBoxes = $('#godziny').width() / 200;
alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2;
if(countBoxes >= 2.65){
$('#godziny').css('margin-left', alignBoxes);
} else{
$('#godziny').css('margin-left', 0);
}
If you change the resolution of your screen, click the button to center your boxes again.
I am currently working with a banner ad and the jquery slidedown function.
My desired goal is to simply have the banner slide down after several seconds and cover up the header of my page, until the user either completes the form (or clicks the "x", which I haven't placed yet.
I got it working just fine within the jsfiddle environment, but for the life of me, I can't figure out why it will not "slide down" in my live environment.
Here is my jsfiddle: http://jsfiddle.net/tXumG/13/.
Here is the banner on my live page: http://online.saintleo.edu/the-saint-leo-experience/faculty-spotlights.aspx
Any help would be GREATLY appreciated. Thank you very much.
HTML:
<div class="hidden">
<body>
<div id="blog-subscribe-outer-container">
<div id="blog-subscribe-overlay">
<div id="blog-subscribe-left"><img src="http://online.saintleo.edu/media/150491/blog-logo-
icon.png" /></div>
<div id="blog-subscribe-center"><span style="color: #FF0000; font-family: arial; font-size:
35px">Subscribe Now!</span></div>
<div id="blog-subscribe-right">
<script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
<script>
hbspt.forms.create({
portalId: '206683',
formId: '3c8d4d75-6e0e-4d1a-a39d-c2728223e2d9'
});
</script>
</div>
</div>
<div id="blog-subscribe-base">
</div>
</div>
</body>
</div>
----------------------------
JS:
jQuery(function($) {
$('.hidden').delay(4000).slideDown("slow");
});
-----------------------------
CSS:
.hidden {
display: none
}
#blog-subscribe-outer-container {
width: 100%;
position: relative;
}
#blog-subscribe-overlay {
background-color: orange;
position: fixed;
text-align: center;
width: 100%;
z-index: 1;
}
#blog-subscribe-base {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #275d39;
}
#blog-subscribe-left {
float:left;
}
#blog-subscribe-center {
display: inline-block;
margin:0 auto;
padding-top: 45px;
}
#blog-subscribe-right {
float:right;
width: 33%;
padding-top: 10px;
}
#blog-subscribe-inner-container {
width:100%;
text-align:center;
}
I suggest to use Css Transitions
And Then use jquery to add the class to element:
$(document).ready(function() {
$('.blog-subscribe-hidden').addClass('animated');
});
Working Fiddle: http://jsfiddle.net/tXumG/14/
I want to pop up a menu on click of a div and I got it all working in this Fiddle: http://jsfiddle.net/EhtrR/825/ but I cant manage to make it work on my code.
HTML:
<div id="clickOne" class="clickDesign">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div id="clickTwo" class="clickDesign">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants">
Leafy Test
</div>
<div id="juicyPlants">
Juicy Test
</div>
CSS:
#leafyPlants{
display:none;
position:absolute;
top:50px;
}
#juicyPlants{
display:none;
position:absolute;
top:50px;
}
jQuery:
$("#clickOne").on('click', function() {
$("#leafyPlants").fadeIn();
$("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function() {
$("#leafyPlants").fadeOut();
$("#juicyPlants").fadeIn();
});
It doesn't show anything when I put it my code.
Add this css
<style>
img {
float: left;
display: block;
height: 40px;
width: 40px;
cursor: pointer;
}
#img1 {
background: #b00;
}
#img2 {
background: #c00;
}
#div1 {
display: none;
position: absolute;
top: 50px;
width: 200px;
background: #077;
left: 10px;
}
#div2 {
display: none;
position: absolute;
top: 50px;
width: 200px;
background: #0b0;
left: 10px;
}
br {
clear: both;
}
</style>
This js codes
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function(e) {
$("#img1").on('click', function() {
$("#div1").fadeIn();
$("#div2").fadeOut();
});
$("#img2").on('click', function() {
$("#div1").fadeOut();
$("#div2").fadeIn();
});
});
</script>
And you HTML
<img id="img1"/> <img id="img2"/> <br/>
<div id="div1">1</div>
<div id="div2">2</div>
It should work. Most probably you did not included jQuery library. I added it.
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
Using it should solve your porblem probably.