First post for me there, I'll start by thanking this awesome community for the help I've found for years now.
I've handled multiple pieces of javascript code without getting an overview of the language, sorry for that. My question is I guess basic but this time I don't find the answer by myself..
I have those two div on the homepage of my site
.MainTitle {
position: relative;
margin: auto;
margin-top:200px;
padding:0;
width:50%;
font-size: 100px;
font-weight:300;
color: #2f3542;
text-align:center;
}
.SubTitle {
position: relative;
margin: auto;
padding:0;
width:50%;
font-size: 50px;
font-weight:300;
color: lightgrey;
text-align:center;
}
.country {
position: relative;
margin: auto;
padding:0;
width:50%;
font-size: 50px;
font-weight:300;
color: lightgrey;
text-align:center;
}
<div class="MainTitle">
HERE MAIN TITLE
</div>
<div class="SubTitle">
<span class="country">FR</span>
<span> | </span>
<span class="country"><a href="fr/pages/about.php">EN</span>
</div>
What I'm trying to do is to :
1. Fade-in the Maintitle with a timing and an opacity that I can set ;
2. Also fade-in the Subtitle with timing/opacity but once the Maintitle has been has showed up
I want those two action to be automatically triggered once the page is loaded. Maybe timing before Maintitle fadein and between Maintitle and Subtitle fade-in can be useful.
Thanks a lot if someone can help me on that !
Hugo
<html>
<head>
<style>
div {
display:none;
}
</style>
<body>
<div class="MainTitle">
HERE MAIN TITLE
</div>
<div class="SubTitle">
<span class="country">FR</span>
<span> | </span>
<span class="country"><a href="fr/pages/about.php">EN</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(window).load(function(){
$(document).ready(function() {
$('.MainTitle, .SubTitle').each(function(fadeInDiv){
$(this).delay(fadeInDiv * 500).fadeIn(1000);
});
});
});
</script>
</body></html>
Related
How do I make my col class of my <div> element responsive?
I would like the text content and the image be shown side by side. The image should go down only when the screen size is too small. Like mobile screens.
Below is a part of my HTML and CSS code for the image and the content:
.content-style {
font-size: 20px;
font-family: cursive;
}
#image-position {
width: 40%;
border-radius: 700px;
}
<div class="row">
<div class="column-left">
<p class="content-style"> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more. Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics. </p>
</div>
<div class="column-right">
<img align="right" id="image-position" class="img-responsive" src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c" alt="Goku's Image">
</div>
</div>
<hr/>
</div>
If you are OK to use Bootsrap, you can use this updated snippet. Otherwise, you will need to implement your own media rules.
.content-style
{
font-size: 20px;
font-family: cursive;
}
#media (min-width: 992px){
.content-style{
float: left;
}
#image-position{
float: right;
}
}
#media (max-width: 992px){
#image-position{
margin: auto;
}
}
#image-position{
width:40%;
border-radius: 700px;
}
.row.someDiv{
margin-left: 0px;
margin-right: 0px;
}
.row.someDiv .col-md-4{
padding-right: 0px;
margin-right: 0px;
}
.row.someDiv .col-md-8{
padding-left: 0px;
margin-left: 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row someDiv">
<div class="col-md-4">
<p class="content-style">Hola! I am Gaurav, I work at Torry
Harris as an IFW Support Analyst. I love coding and I wanna build my
career in a lot of fields. If I could name some right way, they
would be, Web Development, SOA Technologies, Automation Testing and
a lot more. Apart from these I also love to read. The genre of my
liking are Fiction, Adventurous, and Epics.</p>
</div>
<div class="col-md-8">
<img id="image-position" class="img-responsive"
src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c"
alt="Goku's Image">
</div>
</div>
<hr />
For a simple 2-column layout, consider using the display: flex property for the parent element and flex: 1 property for the child elements. To improve the responsive layout on smaller screens, use a media query to change the display type back to 'block'.
<style>
.wrapper {
max-width: 480px;
margin: 0 auto;
}
.wrapper .row {
display: flex;
/* extra code if you want to center the child elements */
align-items: center;
justify-content: center;
}
.wrapper .row > .column-left {
flex: 1;
}
.wrapper .row > .column-right {
flex: 1;
}
.wrapper .img-responsive {
max-width: 100%;
float: initial;
}
#media screen and (max-width:600px) {
.wrapper .row {
display: block;
}
}
</style>
<div class="wrapper">
<div class="row">
<div class="column-left">
<p class="content-style"> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more. Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics.</p>
</div>
<div class="column-right">
<img align="right" id="image-position" class="img-responsive" src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c" alt="Goku's Image">
</div>
</div>
</div>
Can you use floats? Try this:
.column-left{
float:left;
display:inline-block;
width:50%;
}
.column-right{
float:right;
display:inline-block;
width:50%;
}
by making the images inline-block and setting width to 50% they will both display in the same line. Floating makes them go as far left or right as they can.
<style>
.content-style {
font-size: 20px;
font-family: cursive;
}
.right {
width: 49%;
float: left;
margin-left: 10px;
background-image: url('https://img1.ibxk.com.br/2014/06/13/13145034906534.jpg?w=480&h=560&mode=crop');
min-height: 200px;
height: 30%;
padding-top: 10px;
background-size: 100% 100%;
border-radius: 700px;
}
.left {
width: 50%;
float: left;
height: 30%;
padding-top: -top: 10px;
}
#media screen and (max-width: 500px) {
.breaker {
clear: both;
display: inline;
height: 100px;
}
.left {
clear: both;
display: inline;
}
.right {
clear: both;
display: inline;
}
}
</style>
<div style="width: 100%;">
<div class="left">
<p> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more.
Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics. </p>
</div>
<div class="breaker"><br></div>
<div class="right">
</div>
</div>
</div>
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
I just tried making a script that fades in a tooltip when you hover a link, image etc.. Everything works fine except the actual fading in of only one tooltip at a time. If it was not clear what i mean: I want to hover an image and show a tooltip right above the image, every other tooltip on the page should not be visible. I know what my mistake is (The hovering of an image fades all tooltips in, because they all have the same class) but i don't know how to fix it. I hope I explained my problem properly and would be very happy if someone could help me. (Please excuse me if my english isn't the best, it is obviously not my mother tongue)
Here is my Code:
$(function() {
$('.button').hover(function() {
$('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$('.tooltip').fadeTo("fast", 0.0);
});
});
.wrapper{
width:90px;
margin:auto;
margin-top:10%;
}
.tooltip{
margin-left: auto;
margin-right:auto;
background-color:#34495e;
color:white;
border-radius:5px;
opacity:0.8;
padding:5px;
text-align: center;
font-size:15px;
font-family: 'Open Sans', sans-serif;
display: block;
opacity:0.0;
}
.button img{
margin-top:5px;
height:50px;
width: 50px;
display:block;
margin-left:auto;
margin-right:auto;
}
.button img:hover{
cursor:pointer;
}
<div class="wrapper">
<div class="tooltip">
189k Likes
</div>
<div class="button">
<img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Twitter_alt_3.png"/>
</div>
</div>
<div class="wrapper">
<div class="tooltip">
200 Followers
</div>
<div class="button">
<img src="http://lakemacholidayparks.com.au/wp-content/uploads/2014/09/facebook-icon.png"/>
</div>
And here is my Code in Action on jsfiddle.net:
https://jsfiddle.net/3y8pcv69/
You are selecting all .tooltips when you can just select the previous element from your button which IS the tooltip. So just do:
$(function() {
$('.button').hover(function() {
$(this).prev('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$(this).prev('.tooltip').fadeTo("fast", 0.0);
});
});
Fiddle
Why is it that when I move my text down another vertical scroll bar appears on the inside of the browser its right where then width ends at approximately 1000px is there a way to extend the length of my page or a simple way to hide the scroll bar that is showing vertically? I still want the default browser vertical scroll bar to show. All tips are appreciated thank you!
If you need to seen any of my code just ask thanks again!
HTML:
<head>
<meta charset="utf-8" />
<title> Iamdrivingtoday.com </title>
<link rel="stylesheet" href="mfcc.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="JqueryPlugins/jquery.vegas.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.vegas.min.css"></link>
<style type="text/css">
<!--
#fadein {
position: relative;
height:100%;
width:100%;
}
#fadein img {
position:absolute;
left:0;
top:0;
}
-->
</style>
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<img src="iadt.jpg" height="100" width="300"> </img>
</header>
<center><nav id="top_menu">
<ul>
<li>Home</li>
<li>Application</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</nav> </center>
<div class="fadein">
<img src="images/slide1.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide3.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
</div>
<div class="bg1">
<img src="images/bg1.jpg" width=1500 height=308 style="position: absolute; left: -125px; top: 477px;">
</div>
<img src="Images/images/newcar.png" width=150 height=150 style="position: relative; top: 320px; left: 100px">
<img src="Images/images/usedcar.png" width=150 height=150 style="position: relative; top: 320px; left: 500px">
<section id="new_car">
<center> <h3>New Car Loan Requirements</h3> </center>
<p> If you're ready to apply for a new car loan, fill out our quick an easy application here at
Iamdrivingtoday.com But obviously, you don't want to waste your time when you don't
know the requirements to get approved for a new car loan. Here's what you'll need to qualify:
</p>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo('.fadein');
}, 4000); // 4 seconds
$.vegas('next');
});
</script>
<section id="main_section" style="position: relative; right: 0px;">
<article>
<header>
<hgroup>
<center><h1>What is Iamdrivingtoday.com?</h1></center>
</hgroup>
</header>
<p>Iamdrivingtoday.com is where we specialize in providing auto loans for people with bad credit.
We know that new and used car customers in certain times need help
finding the right auto loan provider. If you think you
have a really bad, or low credit rating, or you have been
turned down in the past, chances are we can help!
Our specialty is getting you financed and we guarantee an
approval!</p>
</article>
<article>
<header>
<hgroup>
<center><h1>Having a hard time getting approved?</h1></center>
</hgroup>
</header>
<p>No matter what your prior credit which may be due to bankruptcy, divorce,
foreclosure, repossession, late payments, or unpaid balances we get
you driving the same day no matter your circumstances.
Just fill out the application and drive away today.</p>
</article>
</section>
<div id="new_div">
<aside id="side_news">
<h4>What your Dealer needs!</h4>
<center>Paystubs!</center>
<center>$1000 Down!</center>
<center>Proof of Insurance!</center>
</aside>
</body>
</html>
CSS:
*{
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
h1{
font:bold 16px tahoma;
}
}
header,section,footer,aside,nav,article,hgroup{
display: block;
}
body{
width: 100%;
display:-webkit-box;
-webkit-box-pack: center;
}
section{
font: 12px Verdana;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header{
background: transparent;
padding: 5px;
text-align: center;
}
#top_menu{
border: 1px solid black;
background:-webkit-linear-gradient(left, #BDBDBD, #E6E6E6, #BDBDBD);
width: 998px;
text-align: center;
box-sizing: border-box;
}
#top_menu li{
display: inline-block;
list-style: none;
padding: 5px 20px;
font: bold 14px tahoma;
}
#new_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#new_car{
Position: relative;
Top: 20px
}
#bg1{
border: 3px solid black;
}
#main_section{
Position: relative;
border:1px solid black;
color: white;
text-shadow:
2px 2px 0 #000,
1px 1px 0 #000;
background-image:url('tb.png');
background-size: 365px 325px;
background-color:#cccccc;
-webkit-box-flex: 1;
float: right;
margin: 15px;
margin-top: 300px;
margin-right: 625px;
padding: 20px 20px;
}
#side_news{
border: 1px solid black;
width: 250px;
margin: 20px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
text-align: center;
padding: 20px;
border-top: 2px solid black;
}
Best guess without seeing code: You have a set height on that container element with overflow:auto
Edit: After looking at your code, I think the best thing to do in this situation is to encourage you to spend some more time reading up about HTML and CSS. You have a lot of inline styles and you're positioning things that really mess up the natural flow of the document. This isn't a small error that's happening but just fundamentally poor code.
I'm not saying this to be mean, but this scroll bar is the least of your problems.
By default when your contents height or width exceeds the height or width of the container explicitly set by you, the css properties overflow-y and overflow-x are enabled.
Disabling the overflow-y value on that particular element will remove the scrollbar.
overflow-y:hidden
To avoid the content from being clipped, increase the height of the container or reduce the content or vice-versa. Not setting the height explicitly or setting it to auto will ensure the container expands enough to prevent its contents from overflowing.
DEMO
You should use,
overflow-y:hidden; - Use this for hiding the Vertical scroll
overflow-x:auto; - Use this to show Horizontal scroll
For IE8: -ms-overflow-y: hidden;
http://www.w3schools.com/cssref/pr_pos_overflow.asp
I have a simple tooltip which has long JavaScript code in the divs.
I would to make it is as simple way
could any one help please
here is my code
<div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool
<div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;">
<div class="tool_wrapper">
<div class="tooltip_top_new"></div>
<div class="tooltip_middle_new">
<div class="content">
<p>Please holder actuall text</p>
<p>Please holder actuall text</p>
</div>
</div>
<div class="tooltip_bot_new2"></div>
</div>
</div>
</div>
css
.tooltip_top_new{
background:url(../images/n_tooltip_top.png) no-repeat;
height:9px;
width:212px;
}
.tooltip_middle_new{
background:url(../images/n_tooltip_middle.png) no-repeat;
width:212px;
}
.tooltip_middle_new .content{
padding:2px 13px 1px;
}
.tooltip_middle_new .content p{
line-height: 1.3;
margin-bottom: 1em;
text-align: left;
}
.tooltip_bot_new2{
background:url(../images/n_tooltip_bot2.png) no-repeat;
height:21px;
width:212px;
}
.Question_di{
position:relative;
}
.pbc11_ttpos1_1Q_di {
border: 0 solid #FF0000;
}
.toolTip_new {
background: none repeat scroll 0 0 transparent;
color: #5C5C5C;
display: none;
font: 10px/12px Tahoma,Geneva,sans-serif;
left: -173px;
top: -90px;
position: absolute;
z-index: 1000;
}
the thing is that I have to copy & paste onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" where ever using the tooltips,I would like to avoid it.
JQueryTools includes a Tooltip module which will get rid of a big chunk of your code.
http://jquerytools.org/demos/tooltip/index.html
It's also possible to create tooltips with no JavaScript at all, using HTML and CSS along these lines:
<div class="has-tooltip">
<button class="huge red">You Know You Wanna...</button>
<div class="tooltip">Do NOT Press This Button.</div>
</div>
And in CSS:
.has-tooltip .tooltip {
position: absolute;
display: none;
<style code to position (with margin-left and margin-top)
and make the tooltip box look how you want>
}
.has-tooltip:hover .tooltip {
display: block;
}
Google "CSS Tooltips" to see lots of examples.