Please look at the jsfiddle
I am wanting to be able to click on home and about and for it to scroll to where the centre of where the href is located?
<a name="index">home</a>
<a name="about">about</a>
<div></div>
<div class="home"></div>
but even this bit of code isn't working. Why?
I want a navigation panel with Home, About, Contact and Info Horizontally placed. And I want that to be perfectly in the centre. and to be fixed position.
I have managed to do this by
$(window).scroll(function(){
$('.navigation').css({
'right': $(this).scrollLeft()
});
});
But it is not perfectly in the centre I then want when you click on one of these it navigates you to the corresponding part of the page which is on a horizontal line with the other pages.
This is what you need:
home
about
<a><div id="about"></div></a>
<a><div id="index" class="home"></div></a>
explanation: href="#index" uses # and that indicates you use an id.
Put an id with the same name in de div.. and you go to that place
You dont even need the <a> tags in de div
Related
I've 2 section in my screen. Left section is for showing tabs and right is for displaying that tab template(as shown in screenshot). I'm not able to understand how to load different templates when I click these tabs
For example, when I click change password, I should be able to load change_password.html template
This is by far I've tried with code.
<div class="nav">
<ul>
<li class="active"></i><span class="hidden-xs hidden-sm">Home</span></li>
<li></i><span class="hidden-xs hidden-sm">Change Password</span></li>
<li>Bookings</span></li>
<li></i><span class="hidden-xs hidden-sm">Settings</span></li>
</ul>
</div>
I've tried to use with but no luck.
I've just started with django, so if anything is missed let me know. Thanks for your help!
Screenshot
I think what you're attempting is not possible. If you don't want a page reload upon clicking on a tab, you need to use Javascript to dynamically show/hide elements. If page reload is acceptable, you can create different views for each tab, each view rendering a different html file.
You can use the Django include tag to render another template with the current context. E.g. {% include "foo/bar.html" %} (see documentation here). But this will not solve your problem of displaying different content upon clicking on a tab.
I am making phonegap application using Onsen-UI. In that,I made a signup page. Now whenever I am trying to scroll the screen, whole body of page is scrolling. I want a particular division in a body that should scroll only. I have app Logo above the signup page and Logo is in the body part. So that shouldn't be scrolled. Only List div should be scrolled.
You can try using the <ons-scroller> directive:
<ons-scroller style="height: 200px">
<p>I am scrollable</p>
</ons-scroller>
I made a simple example: http://codepen.io/argelius/pen/dPeKOB
This option works to me:
<ons-page>
Toolbar here
<div class="background"></div>
<div class="content">
Scrollable content here
</div>
Fixed content here
</ons-page>
from: https://onsen.io/v2/api/js/ons-page.html
I am very new to laravel frame work, I am using laravel 4.2, now i have a problem with my blade template engine.
In my laravel admin panel After user login one dashboard page will display. This page is working fine.This page consists of master.header.php (which is my header) and dashboard page which is my left menu.
Blade code as follows
<pre>
below is my dashboard page code
#extends('includes.header')
#section('head')
#parent
<title>DashBoard</title>
#stop
#section('content')
LEFT MENU COMES HERE
#stop
</pre>
<pre>Now in my left menu different links are there.
So i want to inlcude header.blade.php and dashboard.blade.php in each link page.
Left menu page code as follows
<pre>
page name is : Employee.blade.php
#extends('usercp.dashboard')
#section('head')
#stop
#section('content')
hi this is my one of left menu section
</pre>
**OUT PUT**
<pre>
But when i click on the left menu link the content is displaying (hi this is my one of left menu section) at the header.
When i see the source of Employee.blade.php the left menu is out side </html> tag.
Not in body tag.
Can any one please help me in this regard.
</pre>
A few thoughts on your code:
In your left menu page the #section('content') is not closed, add a
#stop
The #extends command has to be the first line in your blade
template, with no html/whitespaces before it.
If you want to include another blade template (e.g. your header), use
#include('partials.header'). By extending another template you can
override the sections of your parent template, which is not
what you want for your header, I'd guess.
I am designing a site that has images that when hovered over fade a text appears.
I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.
DIV with text over an image on hover
Here is my amended code, amended
CSS
p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
div.containerdiv{position:relative}
div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
div.texts:hover{display:block}
html
<div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
<img src="images/cncpt.jpg" alt="background">
<div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
<!-- end .grid_8 -->
Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!
Any ideas on how to solve this would be greatly appreciated.
Thanks,
John
A simple answer using CSS is to use the :hover pseudo class on an anchor tag.
Set you image container as position:relative in CSS.
Create a div containing your text, formatted using html and CSS inside the image container. Position this absolute in CSS. Absolute positioning positions elements relative to the parent container positioned relative. If no element is set to position relative it will take its position from the body tag. It is important to set a width to the element too.
THE HTML
<div class="container">
<a><img src="img.jpg" alt="background">
<div class="text">I will show on hover</div>
</a>
</div>
CSS
div.container{position:relative;}
div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}
a:hover div.text{display:block;}
This will position the text over the container you set to position relative aligning to the top left corner. The z-index stacks elements one above the other. The higher the z-index the higher the element is in the stack.
w3 schools have some excellent definitions and examples on all the code above if it is new to you.
The effect you are after can be achieved with html and css alone. I would advise you focus on:
design your site on paper
layout your page with html and CSS
add your rollover effects and jQuery animations
before adding the jQuery animation
CSS3 transitions are not compatible with all browsers, there are work arounds in CSS though a jQuery fallback is often used.
I have a complex vertical nav which includes transparent PNG's in my design. I need to make these menus grow dynamically in height because the content is pulled from a CMS and some buttons can grow in height depending on how many lines the text field wraps to.
Here is my scernario:
<ul>
<li>
<a>
<span>
<span> This is an example of a very long menu name which will wrap<span>
</span>
</a>
</li>
</ul>
I need to use some javascript to work out if the second span tag has wrapped the text inside it and by how many lines so that I can deliver a different background image for that menu item.
Does anyone know how I would go about this?
Thanks,
James
Managed to find a solution. I can check the height of the span using jQuery's .height() method and if the height is anything bigger than the original size, I can deliver a different image for that button :)