HTML-
<div class="wrap">
<div class="floatleft">
<div class="JShover">
<h3 class="border">Works with your business applications
<p >Connect with Office 365, GSuite.</p></h3>
</div>
<div class="JShover">
<h3 class="border">Works with your business applications
<p>Connect with Office 365, GSuite.</p></h3></div>
</div>
<div class="floatright" >
<img class="integration" src="integrations-image.png" width="100%" height="100px">
</div>
<div style="clear: both;">
</div>
</div>
CSS used for the div-
.border{
border-left:6px solid #3793EE;
text-align: left;
padding-left: 5%;
}
div.JShover{
height:50%;
text-align: left;
opacity:0.5;
}
.wrap {
overflow: hidden;
margin: auto;
max-width: 700px;
}
.floatleft {
float:left;
width: 50%;
height: 500px;
}
.floatright {
float: right;
height: 500px;
width: 50%;
}
When the floatleft divs JShover is clicked the opacity should be 1. Otherwise it should 0.5.
JavaScript used-
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript">
$(".JShover").click(function() {
this.style.opacity = 1
});
</script>
In the result the JShover divs have an opacity of 0.5 (since it is in the CSS) but when I click on it, the opacity does not change to 1. Is there any error in my code or implementation?
You can for example do it like this:
$(".JShover").click(function() {
this.style.opacity = 1
});
Also add opacity: 0.5; to your div.JShover element in css.
Working fiddle here.
Edit:
First, be sure to have jQuery on your site either with having and linking a local copy or linking it inside your <head> like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
And second be sure to put your js code for changing opacity below the linked jQuery library, for example below or at the end of the <body> tag.
Here is your html
<div class='floatleft'>
Hello..... :)
</div>
Here is your CSS
.floatleft{
background-color:red;
opacity:0;
}
Here is your JS
$('.floatleft').click(function(){
$(this).css('opacity','1')
});
Hope this helps you
Related
I am trying to create UI where on click tiles [sub-divs] move from one parent div to another parent div. I have created a pen to explain the question.The pen is working fine but now I need to know how to show them moving, animation. I want them to fly one by one on click. I used greensock.js before but I don't have any idea how to use it in this case, or can I use it here?
$(".mybox").on('click', function() {
$(this).css('background', 'red');
$(this).detach();
$(this).appendTo("#two");
var p = $("#two");
var position = p.position();
TweenLite.to(this, 0.5, {x:position.left, y:position.right});
});
#one {
width: 200px;
height: 200px;
float: left;
background: rgba(255,40,100,0.5);;
}
#two {
margin-left: 300px;
width: 200px;
height: 200px;
background: rgba(0,240,10,0.5);
}
.mybox {
float:left;
width: 50px;
height: 50px;
background: rgb(255,0,0);
margin: auto auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<div id="content" class="mybox">
1
</div>
<div id="content" class="mybox">
2
</div>
<div id="content" class="mybox">
3
</div>
<div id="content" class="mybox">
4
</div>
<div id="content" class="mybox">
5
</div>
</div>
<div id="two">
</div>
I am working on an effect here, I will post the code as well, but here is the basic premise. I have a div containing 2 divs and one hidden div called test. When I click the containing div I want the hidden div (which is called "test") to animate only for the containing div I clicked. Right now it is opening on every single div because of how I have the code written, I am thinking I have to use "this" in order to get it to open correctly the way I want it, but I am not sure how to use it in this instance
TLDR: I want to toggle class .open on the div .test when I click the div .workImg (or workBlock), currently it is opening on every .workImg, I want it to only open on the one I click. I am very stumped, I think I need to use $(this) in here somewhere to target just the one I am clicking but cannot figure out how to apply that since all of my class names are the same...
HTML:
<div class="workCont">
<div class="workBlock">
<div class="workImg">
<div class="test"></div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
<div class="workBlock">
<div class="workImg">
<div class="test"></div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
<div class="workBlock break">
<div class="workImg">
<div class="test"></div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
</div>
CSS:
.workCont {
width:1024px;
margin: $center;
overflow:hidden;
.workBlock {
float:left;
margin-left:17px;
&:nth-child(3n+1) {
margin-left:0;
}
&:nth-child(1n+1) {
margin-top:33px;
}
.workImg {
background:#151515;
width:330px;
height:201px;
display:inline-block;
position: relative;
}
.test {
position: absolute;
z-index:100;
width: 0px;
height: 0px;
-webkit-transition-duration: 1s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
text-align: center;
background: white;
color: white;
font-family: sans-serif; /* Just 'cos */
}
.test.open {
transform: scale(50, 50);
top: 0px;
left: 0px;
width: 1000px;
height: 1000px;
clear:both;
}
.workName {
text-align:center;
margin-top:17px;
}
}
}
jQuery:
$(document).ready(function(){
$(".workImg").click(function() {
$(".test").toggleClass("open");
});
});
use $(this)
$(document).ready(function(){
$(".workImg").click(function() {
$(this).find(".test").toggleClass("open");
});
});
I am trying to use CSS to center the ASlider Jquery plugin (http://varunnaik.github.io/A-Slider/) which I have embedded into the HTML code for my website. For the life of me I can't figure out how to do it!
It seems adamant that it wants to stay on the left side of my page. I have tried using the float and display CSS elements; neither of them did anything. I even tried using margin and padding, and still nothing happened. Hell, I was desperate enough to see if text-align: center; would work but that didn't do anything either.
Here is the script in CSS and HTML to include the ASlider:
.aslider {
margin: auto;
float: center;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="a-slider/aslider.js"></script>
<!--<div id="moveslider">-->
<div class="aslider" data-hide-controls>
<div class="aslide" data-duration="5">
<img src="images/pic1.jpg" width="550px" height="300px">
</div>
<div class="aslide" data-duration="5">
<img src="images/pic2.jpg" width="550px" height="300px">
</div>
</div>
<!--</div>-->
float: center; is not valid so you can remove it from .aslider. All you need to do is add a width to .aslider so that margin: auto; takes effect.
.aslider {
margin: auto;
width: 550px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="a-slider/aslider.js"></script>
<!--<div id="moveslider">-->
<div class="aslider" data-hide-controls>
<div class="aslide" data-duration="5">
<img src="http://placehold.it/550x300" width="550px" height="300px">
</div>
<div class="aslide" data-duration="5">
<img src="http://placehold.it/550x300" width="550px" height="300px">
</div>
</div>
<!--</div>-->
Normally you can do it like this:
.wrapper{
width: 100%;
border: solid;
}
.center{
border: solid red;
width: 100px;
margin-left: auto;
margin-right: auto;
}
<div class="wrapper">
<div class="center">
This needs to be centered
</div>
</div>
Add your image width to your .aslide class
.aslider{
margin:0 auto;
}
.aslide{
width:550px;
margin:0 auto;
}
<---------------------------EDIT--------------------------->
Better yet use this:
.aslider{
width:100%;
text-align:center;
margin:0 auto;
}
I'm using the load method to load a webpage with in my website.
// main.js
$(document).ready(function ()
{
$("#content").html("<object data='http://tired.com/'>");
});
// index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="scripts/main.js"></script>
<style type="text/css">
#container{
width: 100%;
height: 100%;
}
#content{
margin-top: 10;
margin-left: 100;
margin-bottom: 10;
margin-right: 10;
width: 500px;
height: 500px;
}
</style>
</head>
<title>
Testing loading a html page into a div
</title>
<body>
<div id="container">
<div id="top">
<p> Top </p>
</div>
<div id="content">
</div>
<div id="bottom">
<p> Bottom </p>
</div>
</div>
</body>
</html>
In spite of giving the content div a height and width of 500px, the webpage still loads in it's original size.
How do I make it larger?
Thanks.
It does work, check this fiddle.
JSFiddle Demo Link
You also might want to add px to your margins.
#content{
margin-top: 10px;
margin-left: 100px;
margin-bottom: 10px;
margin-right: 10px;
background:skyblue;
width: 500px;
height: 500px;
padding:10px;
}
I would recommend trying to set style on the object tag itself:
#content object {
width: 500px;
height: 500px;
}
This is a followup to my earlier question, Fade in/out js mouseover event.
I am looking to incorporate a div mouseover effect on a small menu on my page. My previous question solved the issue, but I had not incorporated the page layout into the function, which has now stopped it from working.
My basic code is:
<style type="text/css">
.hidden{
display:none;
}
#container {
margin: 0%;
padding: 0;
width: 100%;
background-color: #222222;
}
#left, #right {
float: left;
margin: 0% 0 0% 0%;
padding: 0%;
background-color: #000;
}
#right {
float: right;
margin: 0% 0% 0% 0;
}
.clear {
height: 0;
font-size: 1px;
margin: 0;
padding: 0;
line-height: 0;
clear: both;
}
</style>
<script type="text/javascript">
oldSelected = "home"
$ (document).ready(function(){
$ ("#products img").mouseover(function(){
$ (".description").stop(true, true);
var newSelected = $(this).attr("alt");
$ ("#" + oldSelected).fadeOut('normal',function(){
$ ("#" + newSelected).fadeIn();
});
oldSelected = newSelected
});
});
</script>
<body>
<div id="container" style="width: 974px; height: 200px;">
<div id="left" style="width: 200px; height: 200px;">
<div id="products" >
<img src="home.png" alt="home" />
<img src="services.png" alt="services" />
<img src="contact.png" alt="contact" />
</div>
</div>
<div id="right" style="width: 760px; height: 200px;">
<div class="description" id="home">
.. content ..
</div>
<div class="description" id="services">
.. content ..
</div>
<div class="description" id="contact">
.. content ..
</div>
</div>
</div>
I assume the mouseover effect has stopped working due to the products and description divs being relocated under new divs.
How do I go about adjusting the code to get the function working again under this layout? Would it work in a table layout instead?
You can try .slideDown and .slideUp
or .show() .hide() with duration