first time posting,
So my problem is that I was creating a layout of tabs with jQuery widgets and in them, I created a flexbox layout filled with multiple iframes
the first tab worked really well, but when I moved on to the second one the flexbox layout still worked but the iframe wasn't showing. I don't know why, I think it could be something about the jQuery not letting the iframe on the other tabs load?
$(function() {
$("#tabs").tabs();
});
.context-content .h3,
.context-content h3 {
margin-top: 5px;
margin-bottom: 0px;
margin-left: -30px;
}
.panel .context-content ol,
.panel .context-content ul {
margin-top: 0px;
margin-bottom: 0px;
}
.context-content>:last-child {
margin-bottom: 0;
margin-left: -8px;
}
.ui-widget.ui-widget-content {
border: 0px !important;
}
.ui-widget-header {
border: 0px solid !important;
background: white !important;
color: #333333;
font-weight: bold;
}
.ui-tabs .ui-tabs-nav li {
font-size: 15px;
font-weight: 700;
padding: 13px 26px;
display: block;
background: #f6f6f6;
color: #6c6c6b;
border: 1px solid #eee;
position: relative;
}
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 3em !important;
background: none;
margin-left: -17px !important;
}
#tabs-2.ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 3em;
background: none;
margin-left: -59px !important;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
border: 0px solid;
background: #757575 !important;
font-weight: normal;
color: #ffffff;
}
/* Start FlexBox */
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<span style="color: #999999;">Select (+) for more product information. Please contact your Steelcase representative for pricing information.</span>
<div id="tabs" class="ui-tabs ui-widget">
<ul class="ui-tabs-nav">
<li>Lounge Chairs</li>
<li>Sofa and Loveseats</li>
<li>Metal-Framed Ganged Units</li>
<li>Wood-Framed Gange Units</li>
<li>Modular Lounge Systems</li>
<li>Benches and Ottomans</li>
</ul>
<div id="tabs-1">
<div class="container">
<div class="flex-item">
<h3>Await by Coalesse</h3>
<iframe src="https://www.thinglink.com/card/1428458712988647426" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
<div class="flex-item">
<h3>B-Free by Steelcase</h3>
<iframe src="https://www.thinglink.com/card/1428459923062128642" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
<div class="flex-item">
<h3>Bivi Rumble Seat with Hoodie</h3>
<iframe src="https://www.thinglink.com/card/1428481989148672002" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
<div class="flex-item">
<h3>Bix by Coalesse</h3>
<iframe src="https://www.thinglink.com/card/1428484701294690306" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
<div class="flex-item">
<h3>Bob by Coalesse</h3>
<iframe src="https://www.thinglink.com/card/1428485668257923074" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
<div class="flex-item">
<h3>Coupe by Coalesse</h3>
<iframe src="https://www.thinglink.com/card/1428488537619038210" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
</div>
</div>
<div id="tabs-2">
<div class="container">
<div class="flex-item">
<h3>Product Name</h3>
<img class="alignnone size-full wp-image-4838" src="https://srn-kaiser-temp.dealerwebadmin.com/wp-content/uploads/sites/1472/2021/02/greybox.jpg" alt="" width="293" height="220" />
</div>
<div class="flex-item">
<h3>Product Name</h3>
<img class="alignnone size-full wp-image-4838" src="https://srn-kaiser-temp.dealerwebadmin.com/wp-content/uploads/sites/1472/2021/02/greybox.jpg" alt="" width="293" height="220" />
</div>
<div class="flex-item">
<h3>Product Name</h3>
<iframe src="https://www.thinglink.com/card/1429150275620306946" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
<div class="flex-item">
<h3>Product Name</h3>
<img class="alignnone size-full wp-image-4838" src="https://srn-kaiser-temp.dealerwebadmin.com/wp-content/uploads/sites/1472/2021/02/greybox.jpg" alt="" width="293" height="220" />
</div>
</div>
</div>
<div id="tabs-3" style="display: none;">
<div class="container">
<div class="flex-item">
<h3>Product Name</h3>
<img class="alignnone size-full wp-image-4838" src="https://srn-kaiser-temp.dealerwebadmin.com/wp-content/uploads/sites/1472/2021/02/greybox.jpg" alt="" width="293" height="220" />
</div>
<div class="flex-item">
<h3>Product Name</h3>
<iframe src="https://www.thinglink.com/card/1429150275620306946" width="400" height="400" frameborder="0" scrolling="no" data-original-width="400" data-original-height="400"></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</div>
</div>
</div>
<div id="tabs-4" style="display: none;">
tabs-4 content
</div>
<div id="tabs-5" style="display: none;">
tabs-5 content
</div>
<div id="tabs-6" style="display: none;">
tabs-6 content
</div>
</div>
I have very little knowledge of javascript, any help would be appreciated, thanks!!
btw here's how it looks the second tab with the iframe
Iframe space
PS I just realized this after finishing the question if I put the id in the URL "/#tabs-2"
it will take me to that tab and the iframe will load and the page will keep loading
[enter image description here][2]
[2]: https://i.stack.imgur.com/nutip.png
I guess I really don't know what I'm doing, thank you for your help, also all of this is made on WordPress
Well it actually worked. Place the script only once on the body
Try to run this file and it worked
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<iframe
src="https://www.thinglink.com/card/1428458712988647426"
width="400"
height="400"
frameborder="0"
scrolling="no"
data-original-width="400"
data-original-height="400"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
<iframe
src="https://www.thinglink.com/card/1428459923062128642"
width="400"
height="400"
frameborder="0"
scrolling="no"
data-original-width="400"
data-original-height="400"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
<script async src="//cdn.thinglink.me/jse/responsive.js"></script>
</body>
</html>
Related
I have a slideshow made with jshowoff[1]. I copied the important part to here. Please have a look at it.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://panthi.lk/js/jquery.jshowoff.copy.js"></script>
<style>
#features {
position: relative;
overflow: hidden;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="banner" id="mid_banner">
<div class="jshowoff jshowoff-1" style="position: relative;">
<div id="features" style="position: relative;">
<a href="/">
<img src="https://panthi.lk/test/one.png" width="100%" height="100%">
</a>
<a href="/">
<img src="https://panthi.lk/test/two.png" width="100%" height="100%">
</a>
<a href="/">
<img src="https://panthi.lk/test/three.png" width="100%" height="100%">
</a>
</div>
</div>
</div>
<script type="application/javascript">
$(document).ready(function() {
$('#features').jshowoff({
effect: 'slideLeft',
changeSpeed: 2500,
speed: 3000
});
});
</script>
</body>
</html>
As you may notice, when a new image slides in, the old image is distorted while being sliding out. This happens because the image sizes are larger than the main div, and when a new image slides in the older one fist goes to its original size before it slides out.
I want to fix this. I tried many tricks, but no luck so far. CSS experts over there, your help is greatly appreciated. All I need is some clue.
[1] https://ekallevig.com/jshowoff/
I was able to fix it with this.
<a href="/" style="height: 100%; width: 100%;">
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://panthi.lk/js/jquery.jshowoff.copy.js"></script>
<style>
#features {
position: relative;
overflow: hidden;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="banner" id="mid_banner">
<div class="jshowoff jshowoff-1" style="position: relative;">
<div id="features" style="position: relative;">
<a href="/" style="height: 100%; width: 100%;">
<img src="https://panthi.lk/test/one.png" width="100%" height="100%">
</a>
<a href="/" style="height: 100%; width: 100%;">
<img src="https://panthi.lk/test/two.png" width="100%" height="100%">
</a>
<a href="/" style="height: 100%; width: 100%;">
<img src="https://panthi.lk/test/three.png" width="100%" height="100%">
</a>
</div>
</div>
</div>
<script type="application/javascript">
$(document).ready(function() {
$('#features').jshowoff({
effect: 'slideLeft',
changeSpeed: 2500,
speed: 3000
});
});
</script>
</body>
</html>
I have a grid image gallery for a collection of projects. By clicking each image, I want it to have a pop-up image slideshow that shows more images that are not in the gallery. So people can see more details about a particular project.
Is it possible to do that with hrml/css/javascript? I'm building it on Tumblr so functions are limited.
Below is the very basic html/css of the grid image gallery. How should I continue from that on?
div.gallery {
border: 20px solid #ccc;
}
div.gallery:hover {
border: 20px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_1.jpg">
<img src="iimg_1.jpg" alt="Cat" width="600" height="600">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_2.jpg">
<img src=""img_2.jpg"" alt="Forest" width="600" height="600">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_3.jpg"">
<img src="img_3.jpg" alt="Lights" width="600" height="600">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_4.jpg">
<img src="img_4.jpg" alt="Sea" width="600" height="600">
</a>
</div>
</div>
<div class="clearfix"></div>
if you want to open new gallery by clicking on a button/link you can write a JavaScript function which will display every element you want in the DOM.
So, on click add new element to HTML from JS and display provided elements.
enter image description hereenter image description hereI created a webpage by using html css and javascript. In home page, I added a pop up contact button and form, it is working but pop up window is opened at the top of page. Home page is like one page you scroll. I added the button to the footer but form is opened close to header. I want to it to open while user see the end of the page. I hope I can clear the problem.
https://github.com/ipeksaygut/website in this link there are HTML- CSS-JS files of only home page.
I am really beginner, I really do not understand the problem. Thanks for helps!
-If something need let me know to sahre to clear problem!
Window is seen as the picture but ı want to see it at the end of page I added photo of window how it is seen and where ı want to see it.
Hi Ipek Saygut!
I put together this code that will give you an idea of what was going on with your css. I have modified the .popUp class in order to fix this issue. Please be aware that you will need to read more on HTML and CSS best practices. Please have a look at this article to get you started in the amazing world of HTML and CSS, don't worry, it takes practice but you will master it soon. HTML & CSS Best Practices.
I certainly hope this code helps, have a good time coding, fellow!
let btn = document.querySelector("button");
let cont = document.querySelector(".popUp");
btn.addEventListener('click', function(){
cont.id = "show";
});
cont.addEventListener('click', function(e){
if(e.target == this){
this.id = "hidden";}
e.preventDefault;
});
body {
font-family: 'Red Hat Display', sans-serif;
}
.footer {
border-top: 5px solid #00acc8;
height: 200px;
background-color: #000;
padding: 50px;
margin: auto;
}
.container {
justify-items: left;
align-items: bottom;
z-index: 2;
padding-top: 55px;
padding-left: 18px;
}
button {
width: 140px;
height: 60px;
font-size: 16px;
font-weight: bold;
color: #2e9ca5;
border: 2px solid #2e9ca5;
border-radius: 5px;
background: white;
transition: all 0.5s ease;
cursor: pointer;
}
button:hover {
background: #2e9ca5;
color: white;
}
#show {
visibility: visible;
animation: pop 0.5s ease-in;
}
#keyframes pop {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
#hidden {
animation: out 0.5s ease-out;
}
#keyframes out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.popUp::before {
content: "x";
font-size: 30px;
color: #8FC1C1;
position: fixed;
right: -35px;
top: 4px;
}
.popUp {
display: block;
margin-top: 5% !important;
background: rgba(0, 0, 0, 0);
width: 50%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
transform: translate(-50%, -50%);
justify-items: center;
align-items: center;
visibility: hidden;
}
form {
display: flex;
flex-direction: column;
width:85%;
margin:0 auto;
grid-template-columns: 150px;
grid-template-rows: repeat(10, 30px);
grid-row-gap: 10px;
background: white;
padding: 30px;
border-radius: 5px;
border: 1px solid #2e9ca5;
}
input,
textarea {
border-radius: 3px;
border: 1px solid #f2f2f2;
padding: 0 6px;
}
input[type=text],
input[type=email] {
height: 30px;
}
input[type=textarea] {}
input[type=submit] {
height: 30px;
background: #2e9ca5;
color: white;
font-weight: bold;
transition: background 0.3s ease;
border: 0;
border-radius: 5px;
}
input[type=submit]:hover {
background: white;
color: #2e9ca5;
}
.remove {
justify-content: end;
align-items: end;
}
label {
color: #b3b3b3;
}
<!DOCTYPE html>
<html>
<head>
<title>Discover To Istanbul</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto&display=swap'>
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght#400;900;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu-bar">
<div class="menu-banner">istanbul</div>
<div class="menu-button">
<ul>
<li>HOME</li>
<li>DESTINATIONS</li>
<li>GALLERY</li>
</ul>
</div>
</div>
<script src="js/main.js" type="text/javascript" defer></script>
<div class="main-header">
<center>
<div class="header-tab">
<h1>İSTANBUL</h1>
<div class="header-alt">Let's Go On The Adventure with us !</div>
<div class="header-alt2"> EXPLORE ISTANBUL </div>
</div>
<div class="header-tab-video">
<header>
<video autoplay="" style="filter:contrast(1.099) brightness(0.92)" preload="none" muted="" loop="" width="780" height="560">
<source src="image/video.mp4" type="video/mp4">
</video>
<div id="overlay">
<p>Istanbul is <span class="typed-text" ></span></p>
</div>
</header>
</div>
</center>
</div>
<a name="anc2">
<div name="#anc2" class="places" id="sacred">
</a>
<h1>sacred places</h1>
<h5>explore most impressive sacred places with us.</h5>
<h6> discover more</h6>
</div>
<div class="places" id="palaces">
<h1 id="flt-rght"> palaces</h1>
<h5 id="flt-rght">explore most attractive palaces with us.</h5>
<a href="html/palaces/palaces.html">
<h6>discover more</h6>
</a>
</div>
<div class= "places" id="oldbuildings">
<h1>old buildings</h1>
<h5>Explore breathtaking and beautiful buildings with us.</h5>
<a href="html/oldbuildings/oldbuildings.html">
<h6>discover more</h6>
</a>
</div>
<div class="galeri">
<h1><a name="anc3" style="text-decoration:none;">#discoverTurkey</a></h1>
<h2>VIDEO <font color=red>|</font> PHOTO </h2>
<div class="galeri-alt">
<div class="galeri-ic" id="galeri1"></div>
<div class="galeri-ic" id="galeri2"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri3"></div>
<div class="galeri-ic" id="galeri4"></div>
<div class="galeri-ic" id="galeri5"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri6"></div>
</div>
</div>
<div class="kayangörseller"
<center><p style="font-size:60px""font-family:Calluna;">Social Media</p></center>
<div class="images">
<marquee direction="right" scrollamount="7">
<a href="https://www.instagram.com/p/CI3iV5yr416/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/galata.jpg" style="width:400px;height:400px;"> </a>
<a href="https://www.instagram.com/p/CI3huz5LGDw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/c.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3h9xCLXPy/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/ayasofya.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iMZXLZy9/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/fenerrum.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iaZlLn-N/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/kapalicarsi.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iikbrmdw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/sultanahmet.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3isMKLXrS/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/taksimanit.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i9RALySO/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/yerebatan.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3xiRiryIn/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/a.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i1EWrZQr/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/t.jpg" style="width:400px;height:400px;">
</marquee>
</div>
</div>
<div class="map">
<center>
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1D66DY_D1-yifqdWfN4_k4mrj_S_JukO6" width="640" height="480" ></iframe>
</center>
</div>
<footer>
<div class="footer">
<div class="social">
<img src="image/instagram.png"><img src="image/youtube.png"><img src="image/twitter.png"><img src="image/facebook.png">
<div class="container">
<button>Contact Us</button>
</div>
<div class="popUp">
<form>
<label for="fn">First Name</label>
<input type="text" name="fn">
<label for="ln">Last Name</label>
<input type="text" name="ln">
<label for="email">Email</label>
<input type="email" name="email">
<label for="notes">Comments</label>
<textarea name="notes" rows="5" cols="5"></textarea>
<input id='submit' type="submit" value="Submit">
<p style="color:#b3b3b3;"> Pop-Up Facts, Recommendations,Interesting Routes... More For Istanbul! </p>
</form>
</div>
</div>
<div class="social" style="width:300px;">
<p>This website prepared for web design course by Kadir Has University students.</p>
<p>Ayça Çiçekdağ</p>
<p>Emre Karağaç</p>
<p>Hilal Pelin Akyüz</p>
<p>İpek Saygut</p>
<p>Sude Arslan</p>
</div>
<div class="social" style="width:180px;" id="logoalt"></div>
</div>
</footer>
<div class="kayanyazi">
<marquee direction=right bgColor="#2e9ca5" text-color="white">FIND ISTANBUL-EXPLORE ISTANBUL WITH US ! | by Ayça Çiçekdağ , Emre Karağaç,Hilal Pelin Akyüz
İpek Saygut,Sude Arslan
</marquee>
</div>
</body>
</html>
I want to scroll to the bottom of the page when I click contacts on the navbar
I have tried
1. windows.scrollTo()
2. windows.scrollBy()
3. element.scrollIntoView();
4. And all other methods that I could find
but the page does not scroll.
Here is my fiddle
https://jsfiddle.net/bvuayks8/1/
I have kept some content on the page so that it can be scrolled.
Here is the code
// ------------------------------Getting the ids-----------------------------------------
var questionid = document.getElementById('question');
var contact = document.getElementById('contact');
// window.scrollTo(0,2000);
// ------------------------------Clear the browser storage--------------------------------
//localStorage.clear();
//sessionStorage.clear();
questionid.focus();
contact.addEventListener('click', function() {
window.scrollTo(0, 1500);
//alert('asdf');
})
body {
background-image: url(../images/images/documentbackground.jpg);
background-repeat: no-repeat;
background-size: cover;
}
/*-------------------------------------Main head------------------------------------------- */
.jumbotron {
margin: 0;
background: url(../images/a2.jpg) no-repeat;
}
.mainHead a {
display: block;
width: 7%;
color: white;
background-color: #3BF44F;
text-decoration: none;
transition: background-color .7s;
}
.mainHead a:hover {
background-color: #08B81B;
}
/*-----------------------------------------------------NavBar--------------------------------------*/
.navbar {}
ul {
list-style: none;
}
li {
float: left;
}
.navbar a {
color: white;
padding: 0 75px;
text-decoration: none;
transition: background-color 0.7s;
}
.navbar a:hover {
background-color: #0bbc08;
color: white;
}
/*----------------------------------------------------------Login------------------------------------*/
.login {
height: 200px;
background: url(../images/images/back1.jpg);
background-size: cover;
background-position: 0 -45%;
/*transition: all 1s;*/
}
/*.login:hover{
transition: all 1s;
background-size: 150%;
}*/
.login h3 {
text-align: center;
color: white;
margin-top: 2%;
}
.login .question {
position: relative;
width: 50%;
margin: 0 auto;
}
.login .question input {
width: 100%;
}
.login .button {
position: absolute;
left: 50%;
}
/*----------------------------------------Menu--------------------------------------------------*/
.menu {
overflow: hidden;
text-align: center;
background: url(../images/how.jpg);
}
.menu button {
transition: all .5s;
}
.menu .graduated:hover {
transform: scale(1.1);
}
.menu .interview:hover {
transform: scale(1.1);
}
.menu .tenthpass:hover {
transform: scale(1.1);
}
.menu .questions:hover {
transform: scale(1.1);
}
.menu .twpass:hover {
transform: scale(1.1);
}
.menu .register:hover {
transform: scale(1.1);
}
/*-------------------------------------------CareerCounsellor---------------------------------------*/
.careerCounselor {
text-align: center;
background: url(../images/a6.jpg);
background-size: cover;
}
.careerCounselor .heading,
.careerCounselor .examples {
color: white;
font-size: 30px;
}
.careerCounselor .row1 img {
width: 55%;
height: 25%;
margin-bottom: 3px;
border-radius: 3px;
}
.careerCounselor .name {
color: white;
}
.careerCounselor .post {
color: #cbbf5a;
}
.careerCounselor .exp {
color: white;
}
/*-----------------------------------------------Examples------------------------------------------*/
/*-------------------------------------------questionGuide---------------------------------------*/
.questionGuide {
text-align: center;
background: url(../images/a2.jpg);
}
/*-------------------------------------------Videos---------------------------------------*/
/*-------------------------------------------Footer---------------------------------------*/
.footer {
background-color: #91FB9D;
text-align: center;
}
.footernav {
width: 100%;
}
.footer .row {
padding: 1% 10% 0 10%;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="homePagecss.css">
<title>Career Guide</title>
</head>
<body>
<div class="container">
<ul class="m-0 p-0 bg-success navbar">
<li class="p-1">About</li>
<li class="p-1">Interview</li>
<li class="p-1">Registration</li>
<li class="p-1">Terms</li>
<li class="p-1" id="contact">Contact</li>
</ul>
<div class="login pt-2">
<h3 class="mt-3">Your Career Is Your Life</h3>
<div class="mt-4 question">
<input id="question" type="text" class="rounded" name="question" placeholder="Type your question">
<button id="askbtn" type="button" class="btn mt-1 btn-success button">ASK!</button>
</div>
</div>
<div class="menu container">
<div class="menuHeading">
<h3 class="mt-3">How to choose your career</h3>
</div>
<div class="row">
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 tenthpass">10th pass</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 twpass">12th pass</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 graduated">Graduated</button>
</div>
</div>
<div class="row">
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 register">Register</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 interview">Interview</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 questions">Questions</button>
</div>
</div>
</div>
<div class="examples p-2 mt-3 font-weight-bold">HOW CAREER GUIDE CHANGING THE LIVES</div>
<div class="row" style="display: flex;">
<div class="col-sm">
<p class="">Career Guidence made course choice simple and easy. I am happy i could make it to IIM-Indore</p>
<img src="../images/a.jpg">
</div>
<div class="col-sm ">
<p class="">Career guidence towards food technology made mahima an example for her friends they can now look beyond the medicine</p>
<img src="../images/b.jpg">
</div>
<div class="col-sm ">
<p class=""> Me and my dad found selection of stream after 10th very scientific and efficient Thenks to CareerGuide</p>
<img src="../images/c.jpg" style="height: 60%;">
</div>
</div>
</div>
<div class="row row2 w-100 p-3 mt-4 container">
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/yIW6eTU2oXY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/FTiKWY2AbEw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/R7iN71uJcG0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="footer pt-3 rounded">
<div class="footernav">
<button type="button" class="btn btn-success btn-outline-light mr-3">About</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Contact Us</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Terms and Conditions</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Login</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Registration</button>
</div>
<div class="phone mt-3">
<img src="../images/phone.png" width="20px" height="20px">
<p class="d-inline-block">+919610085083</p>
</div>
<div class="links">
<img src="../images/twitter.png" width="20px" height="20px" class="mr-1" >
<img src="../images/g+.png" width="20px" height="20px" class="mr-1" >
<img src="../images/facebook.png" width="20px" height="20px" class="mr-1" >
<img src="../images/img2.png" width="20px" height="20px" class="mr-1" >
</div>
<div class="row">
<div class="col-sm">
<p>1105<br>Career Experts</p>
</div>
<div class="col-sm">
<p>551<br>Career Topics</p>
</div>
<div class="col-sm">
<p>1199<br>Career Questions</p>
</div>
<div class="col-sm">
<p>345,123<br>Students Impacted</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="text/javascript" src="homePage.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
You really don't need JavaScript for this , you can add one id in footer and simply call it on click of contact button as follow.
body {
background-image: url(../images/images/documentbackground.jpg);
background-repeat: no-repeat;
background-size: cover;
}
/*-------------------------------------Main head------------------------------------------- */
.jumbotron {
margin: 0;
background: url(../images/a2.jpg) no-repeat;
}
.mainHead a {
display: block;
width: 7%;
color: white;
background-color: #3BF44F;
text-decoration: none;
transition: background-color .7s;
}
.mainHead a:hover {
background-color: #08B81B;
}
/*-----------------------------------------------------NavBar--------------------------------------*/
.navbar {}
ul {
list-style: none;
}
li {
float: left;
}
.navbar a {
color: white;
padding: 0 75px;
text-decoration: none;
transition: background-color 0.7s;
}
.navbar a:hover {
background-color: #0bbc08;
color: white;
}
/*----------------------------------------------------------Login------------------------------------*/
.login {
height: 200px;
background: url(../images/images/back1.jpg);
background-size: cover;
background-position: 0 -45%;
/*transition: all 1s;*/
}
/*.login:hover{
transition: all 1s;
background-size: 150%;
}*/
.login h3 {
text-align: center;
color: white;
margin-top: 2%;
}
.login .question {
position: relative;
width: 50%;
margin: 0 auto;
}
.login .question input {
width: 100%;
}
.login .button {
position: absolute;
left: 50%;
}
/*----------------------------------------Menu--------------------------------------------------*/
.menu {
overflow: hidden;
text-align: center;
background: url(../images/how.jpg);
}
.menu button {
transition: all .5s;
}
.menu .graduated:hover {
transform: scale(1.1);
}
.menu .interview:hover {
transform: scale(1.1);
}
.menu .tenthpass:hover {
transform: scale(1.1);
}
.menu .questions:hover {
transform: scale(1.1);
}
.menu .twpass:hover {
transform: scale(1.1);
}
.menu .register:hover {
transform: scale(1.1);
}
/*-------------------------------------------CareerCounsellor---------------------------------------*/
.careerCounselor {
text-align: center;
background: url(../images/a6.jpg);
background-size: cover;
}
.careerCounselor .heading,
.careerCounselor .examples {
color: white;
font-size: 30px;
}
.careerCounselor .row1 img {
width: 55%;
height: 25%;
margin-bottom: 3px;
border-radius: 3px;
}
.careerCounselor .name {
color: white;
}
.careerCounselor .post {
color: #cbbf5a;
}
.careerCounselor .exp {
color: white;
}
/*-----------------------------------------------Examples------------------------------------------*/
/*-------------------------------------------questionGuide---------------------------------------*/
.questionGuide {
text-align: center;
background: url(../images/a2.jpg);
}
/*-------------------------------------------Videos---------------------------------------*/
/*-------------------------------------------Footer---------------------------------------*/
.footer {
background-color: #91FB9D;
text-align: center;
}
.footernav {
width: 100%;
}
.footer .row {
padding: 1% 10% 0 10%;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="homePagecss.css">
<title>Career Guide</title>
</head>
<body>
<div class="container">
<ul class="m-0 p-0 bg-success navbar">
<li class="p-1">About</li>
<li class="p-1">Interview</li>
<li class="p-1">Registration</li>
<li class="p-1">Terms</li>
<li class="p-1" id="contact">Contact</li>
</ul>
<div class="login pt-2">
<h3 class="mt-3">Your Career Is Your Life</h3>
<div class="mt-4 question">
<input id="question" type="text" class="rounded" name="question" placeholder="Type your question">
<button id="askbtn" type="button" class="btn mt-1 btn-success button">ASK!</button>
</div>
</div>
<div class="menu container">
<div class="menuHeading">
<h3 class="mt-3">How to choose your career</h3>
</div>
<div class="row">
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 tenthpass">10th pass</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 twpass">12th pass</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 graduated">Graduated</button>
</div>
</div>
<div class="row">
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 register">Register</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 interview">Interview</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 questions">Questions</button>
</div>
</div>
</div>
<div class="examples p-2 mt-3 font-weight-bold">HOW CAREER GUIDE CHANGING THE LIVES</div>
<div class="row" style="display: flex;">
<div class="col-sm">
<p class="">Career Guidence made course choice simple and easy. I am happy i could make it to IIM-Indore</p>
<img src="../images/a.jpg">
</div>
<div class="col-sm ">
<p class="">Career guidence towards food technology made mahima an example for her friends they can now look beyond the medicine</p>
<img src="../images/b.jpg">
</div>
<div class="col-sm ">
<p class=""> Me and my dad found selection of stream after 10th very scientific and efficient Thenks to CareerGuide</p>
<img src="../images/c.jpg" style="height: 60%;">
</div>
</div>
</div>
<div class="row row2 w-100 p-3 mt-4 container">
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/yIW6eTU2oXY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/FTiKWY2AbEw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/R7iN71uJcG0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div id="footer" class="footer pt-3 rounded">
<div class="footernav">
<button type="button" class="btn btn-success btn-outline-light mr-3">About</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Contact Us</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Terms and Conditions</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Login</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Registration</button>
</div>
<div class="phone mt-3">
<img src="../images/phone.png" width="20px" height="20px">
<p class="d-inline-block">+919610085083</p>
</div>
<div class="links">
<img src="../images/twitter.png" width="20px" height="20px" class="mr-1" >
<img src="../images/g+.png" width="20px" height="20px" class="mr-1" >
<img src="../images/facebook.png" width="20px" height="20px" class="mr-1" >
<img src="../images/img2.png" width="20px" height="20px" class="mr-1" >
</div>
<div class="row">
<div class="col-sm">
<p>1105<br>Career Experts</p>
</div>
<div class="col-sm">
<p>551<br>Career Topics</p>
</div>
<div class="col-sm">
<p>1199<br>Career Questions</p>
</div>
<div class="col-sm">
<p>345,123<br>Students Impacted</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="text/javascript" src="homePage.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
If you want this using javascript than just add settimeout before call scroll function
contact.addEventListener('click', function() {
setTimeout(function(){
window.scrollTo(0, 1500);
},0)
//alert('asdf');
})
I have 3 images on top of each other. The first one is a normal .jpg image, the second a greyscale version and the 3rd is some kind of effect i add with a transparent .png
Now what i want is that, if i move the mouse over those images, the greyscale image is hidden or replaced by another image and afterwards visible again.
The problem here is that i am a js noob, so it's kind of hard for me to find a solution ^^
my code looks something like this:
<html>
<head>
<style type="text/css">
<!--
ul li{
display: inline-table;
}
.frame{
position: relative;
height: 110px;
width: 110px;
}
.frame div{
position: absolute;
top:0px;
left:0px;
}
.effect{
background:url(images/effect.png) no-repeat;
height:110px;
width: 110px;
}
.image{
height:100px;
width:100px;
border: 1px solid red;
margin:4px;
}
.greyscale{
height:100px;
width:100px;
border: 1px solid red;
margin:4px;
}
-->
</style>
</head>
<body>
<ul>
<li>
<div class="frame">
<div class="image"><img src="images/pic1.jpg" height="100" width="100"></div>
<div class="greyscale"><img src="images/grey1.jpg" height="100" width="100"></div>
<div class="effect">qwert</div>
</div>
</li>
<li>
<div class="frame">
<div class="image"><img src="images/pic2.jpg" height="100" width="100"></div>
<div class="greyscale"><img src="images/grey2.jpg" height="100" width="100"></div>
<div class="effect">qewrt</div>
</div>
</li>
</ul>
</body>
</html>
would be super-awesome if someone can help me out :)
Try this:
.frame:hover .greyscale { display: none; }
Try adding this to you're css:
div.greyscale:hover img { display: none; }
This will hide you're image if you hover over the greyscale div.
Look into this example,
Here I have a big image on the top and 3 images below.
On mouse hover sll 3 images they will replace big one. on mouse out old image will come back
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/Bigcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle1.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/>
</p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
<p><img src="../Pictures/lightcircle3.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
You cam modify it in the way you need it.
Cheers..