Change html page position when page is loaded - javascript

When I open my html, I would like to see a content of the first Home div.
When I'm opening it, the page is blank, and I need to click on Home href to see its content.
What can i do to see it when it loads?
HTML:
<div id="nav1">
HOME
</div>
<div id="nav1">
GALLERY
</div>
<div id="nav1">
IMPORT
</div>
<div id="nav1">
ABOUT ME
</div>
<div id="nav1">
CONTACT
</div>
<div class="target">
<div id="home">asddsa</div>
<div id="gallery">asdfgaasd</div>
<div iv="s1">some1</div>
<div id="s2">some2</div>
<div id="s3">some3</div>
</div>
CSS:
.target {
float: left;
background-color: white;
padding: 15px;
width: 800px;
opacity: 0.9;
min-height: 600px;
}
.target > div {
display: none;
}
.target > div:target{
display:block;
}

Use window.location:
<script>
window.location = "#home";
</script>
Jump link:
HOME
The script runs on load and navigates to the link

Related

Angular router-outlet chilld doesn't take all width

I have a router outlet in a component. The child component doesn't take the whole width. I tried to give to the child's div width:100%, min-width:100%, also with !important, but it's not working. How can I force the child's div to take the whole width available?
Parent HTML:
<div fxLayout="column" fxLayoutAlign="space-between stretch">
<div>
...
</div>
<div fxLayout="row" fxFlexFill>
<div class="navbar" fxLayout="column">
</div>
<div class="mainDiv" fxFlex>
<router-outlet></router-outlet>
</div>
</div>
<div fxLayoutAlign="end"></div>
</div>
Parent CSS:
.navbar {
padding-top: 40px;
padding-right: 80px;
border-top: none;
}
.mainDiv {
width: 100%;
border-top: none;
}
Child CSS:
<div class="container">...</div>
Try set the router-outlet inside a div without using flex:
<div style="width: 100%;height: 100%">
<router-outlet ></router-outlet>
</div>

How can i slidetoggle to the left?

I have two glyphicon which i want to show the information to the left using slidetoggle. But, It opens downward. Please, help.
$(document).ready(function() {
$('#show_icon,.showhide_icon').hover(function() {
$(this).next().slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Login/Register</div>
</div>
</li>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Shopping Bag</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
The CSS Properties goes like this.
CSS Properties
.listmenu {
float: left;
width: auto;
margin-right: 0;
height: 30px;
padding: 0 10px;
overflow: hidden;
}
#categories {
display: none;
width: 200px;
}
slideToggle() animates on the height of the element which is why you're seeing it open downward.
If you want a animation like you've linked in the comments use animate() to handle the width of the element. The site linked is using overflow: hidden and changing the width of the container to show the icon only or icon and text.
Edit: After reviewing your question again, a better solution might be to handle this with css:
The html is edited to include only what is needed to make this work. You'll want to review this for your purposes as well:
.listmenu {
display: inline;
}
.umMenu {
height: 16px;
max-width: 14px;
display: inline-block;
overflow: hidden;
}
.listmenu:hover .umMenu {
max-width: 500px;
/*Can be any # of sufficient width to display all content*/
transition: 2s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
Login/Register
</li>
<li class="listmenu">
Shopping bag
</li>
</ul>
</div>
</div>
</div>
</header>

How to make an image in a separate div change on hover of nav?

I have a site I'm working on where I have a nav bar in a div at the top of the page followed by a separate div which contains an image directly below it.
I'm trying to figure out the best way to change the image by hovering over each part of the nav bar.
Basically I want an image for home to show up when the home nav feature is hovered and so on with the rest of the menu.
UPDATE:
As I tried to explain before (not as clear as I could have) I want to make each nav bar element (Home, Downloads, etc.) show a different image in the div below it. Here is the section of code for the two elements.
<li class="active">Home</li>
<li >About</li>
<li >Mods</li>
<li>Forums</li>
<li >Downloads</li>
<li>Blog</li>
</ul>
</div>
</nav>
<div class="parallax-container">
<div class="container" style="background: rgb(55,71,79); width:960px; padding-top: 10px; padding-left: 50px; border: 2px; border-radius: 50px;">
<div class="row">
<div class="hover-image white-text col s12 l6">
<img src="homeimage.png" class="hover image" style="height:auto; width:auto; max-width: 860px; max-height: 860px;"/>
<h5 class="hover-header" style="padding-left: 20px;">Home</h2>
<p class="hover-paragraph" style="padding-left: 25px;">Welcome to the page!</p>
</div>
</div>
</div>
<div class="parallax"><img src="/img/image.png"></div>
</div>
<style>
.hover-image {
position: relative;
width: 100%;
margin: auto;
}
.hover-header {
position: absolute;
top: 350px;
left: 10;
width: 100%;
}
.hover-paragraph {
position: absolute;
top: 380px;
width: 100%;
}
</style>
Page Layout
Try CSS something like this;
.nav:hover .image{
background-image: url('path/to/image.ext');
}
If you can share your code, I can be more specific.
try this code -
CSS -
#navImage img{
display:block;
width:500px;
height:auto;
}
#myNav{
list-style-type: none;
}
#myNav li {
display: inline;
padding: 10px;
}
#myNav li a:hover {
color:#00ffff;
}
#navImage img{
display:none;
}
HTML
<ul id="myNav">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<div id="navImage">
<img src="img_chania.jpg" alt="Chania">
<img src="img_chania2.jpg" alt="Chania">
<img src="img_flower.jpg" alt="Flower">
<img src="img_flower2.jpg" alt="Flower">
</div>
JS to initialize (with jQuery) -
$("#myNav li a").on('mouseover', function(){
$("#navImage img").hide().eq($(this).closest('li').index()).show();
});
Please note, if you are working on responsive design(using bootstrap navigation), you need to do changes accordingly.
jsfiddle - https://jsfiddle.net/guruling/k2zgot5r/
.myButtonLink {
display: block;
width: 100px;
height: 100px;
background: url('/path/to/myImage.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}
<a class="myButtonLink" href="#LinkURL">Leaf</a>
Do you want something like this. Please check this link:-http://kyleschaeffer.com/development/pure-css-image-hover/

localscroll.js - Can not seem to figure out how to set up the links

I have only just been introduced to HTML code 3 days ago and have not learnt much and this would probably be an easy fix but the title says it all. I am unsure on how to set up the page links so I can use the smooth scrolling jQuery plugin, localscoll.js. Oh and im trying to link .section2 to .arrow and servers.png
Javascript:
<script type="text/javascript">
jQuery(function( $ ){
$.localScroll.defaults.axis = 'xy';
$.localScroll({
target: '#content',
queue:true,
duration:1000,
hash:true,
onBefore:function( e, anchor, $target ){
},
onAfter:function( anchor, settings ){
}
});
});
</script>
HTML:
<div class="section1">
<div class="menubar">
<div class="menubar fadeInUp animated">
<img class="menutext" src="images/menu_bar/servers.png">
</div>
<div class="banner wow fadeInUp animated" data-wow-delay="0.75s" />
<img class="arrow wow fadeIn animated" data-wow-delay="0.75s" src="css/banner/arrow.png">
</div>
</div>
<div class="section2">
<a name="section2"></a>
</div>
</div>
CSS:
.arrow {
margin-top: 470px;
text-align: center;
}
.section2 {
background: url(section2/background.png);
background-position: center;
width: 100%;
height: 515px;
margin-bottom: 0;
position: relative;
}
According to localscroll.js (and the common ref links), the href attribute (#section2) should be the target's id.
Try change the class for ID
<div id="#section2">
<a name="section2"></a>
</div>

jQuery Mobile Div at top

A bit of a strange request, I know.
I have a jQueryMobile page, a simple one as you can see:
<div data-role="page" class="type-home" id="home">
<div data-role="header" data-theme="b">
<h1>Our Tools</h1>
</div>
<div data-role="content">
<ul data-role="listview">
......
I need to put a Div containing a 100 px high content at the very top, outside any styling or div that jQuery Mobile uses.
How would that be done, as adding a plain Div as is just gets covered by jQuery Mobile.
I can't use an iFrame, it has to be all on one page in html.
If you are wanting a static header-type DIV, this is what works for me.
I put a "header" with fixed height and then offset the "content" with a margin-top like below. .ui-content is a class that is added automatically by jQM.
HTML:
<div data-role="page" id="somePage">
<div class="ui-bar ui-bar-b">
<a data-role="button" href="#main" data-transition="none" data-theme="a"></a>
<h1>Some header</h1>
</div>
<div data-role="content">
<div id="someDiv">
</div>
</div>
</div>
CSS:
.ui-bar {
position: fixed;
height: 100px;
z-index: 10000;
width: 100%;
padding: 0px 5px;
box-sizing: border-box;
}
.ui-content {
position: relative;
padding: 10px;
margin-top: 100px;
}

Categories