I'm trying to use reload a page to go to an anchor, but the page don't reload or scroll to the anchor. The anchor is not shown till the link is hit.
$('.link').click(function() {
$('#box').css('display', 'block');
});
#box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<h1>Title</h1>
<p>Description of the content.</p>
</div>
Go to #Box
This is the page in my blog: http://simulatorio.blogspot.com.br/p/politicas.html#cookies
For exemple:
I open http://simulatorio.blogspot.com.br/p/politicas.html in a small window (width of 500px, the content is shown).
I click in Menu (the content is hidden, the menu is shown).
I click in a link http://simulatorio.blogspot.com.br/p/politicas.html#cookies.
The page does nothing (it doesn't reload)!!!
What I want is to go to the page http://simulatorio.blogspot.com.br/p/politicas.html#cookies on itself.
PS.: It only works when the link is opened in a new window/tab.
It should be opened in a small screen because the problem is happening there (responsive page). Thanks!
If the anchor is display:none, it may as well not exist for the purpose of navigation. Try this styling instead:
#box {
width:0;
height:0;
overflow:hidden;
}
Or:
#box {
visibility:hidden;
}
Its because after refreshing the style is applied to #box so its hidden.
#box {
display: none;
}
Do you need something like this:
HTML:
<div id="box" class="boxContent">
<h1>Title</h1>
<p>Description of the content.</p>
</div>
Go to #Box
CSS:
.boxContent {
visibility:hidden;
}
JS:
$('.link').click(function() {
$('#box').toggleClass( "boxContent");
});
FIDDLE: http://jsfiddle.net/2TCy4/42/
Related
There is a code like that(simplified):
<style>
.contentblock{
background-color:green;
}
.thereisaproblem{
background-image:url(image.png);
background-attachment:fixed;
}
.fix{
position:fixed; /* text is centred too if thats important*/
}
</style>
<body>
<div class="thereisaproblem" id="id1">
<div class="fix"> Fixed text </div>
</div>
<div class="contentblock">
Website content 1
</div>
<div class="thereisaproblem" id="id3">
<div class="fix"> Another fixed text </div>
</div>
<div class="contentblock">
Website content 2
</div>
</body>
I need "Fixed text" to be visible only in a div with id 1, and "Another fixed text" to be visible only in a div with id 3".
When I tried to do it simply by position:fixed; text overlapped in both divs. Using z-index can only prevent 3 from being visible in 1 and vice versa. Always one of texts can be visible in the wrong div. Is there any solution to make fixed like effect but with text visible only in one div? It would be best to use just html/css, but if jscript/jquery is needed then it's ok.
there is link to jsfiddle
Basicly, if you check the jsfiddle, I want other text to be visible in the place of the first one when you scroll down to another div. You can ignore the problem of fixed text being on top of solid blue divs.
Now I understand.
CSS SOLUTION
.thereisaproblem{
position:relative;
}
.fixed{
position:absolute; // FIXED IS RELATIVE to window
// ABSOLUTE is relative to first positioned parent
}
JAVASCRIPT SOLUTION
I'll post with jQuery but it's not necesssary, it can be done just as fine with simple good old javascript.
All the code does is if the user has scrolled 100px from the top then it hides whatever div has the class top (in your case is what you had with #1), and shows the div with class bottom. Otherwise, it does the opposite. You'd have to see what's the best distance for you to use to satisfy your purpose.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 100) {
$('.top').hide();
$('.bottom').show();
}
else {
$('.bottom').hide();
$('.top').show();
}
});
In regards to CSS:
.contentblock{
position:relative;
z-index:2;
}
.fixed{
position:fixed;
z-index:0:
}
.bottom{
display:none;
}
Notice how initially the div (third div) is in display none so that only the first div is visible.
<div class="thereisaproblem top" >
<div class="fixed">
Fixed text visible in first div
</div>
</div>
<div class="contentblock">
Website content
</div>
<div class="thereisaproblem bottom">
<div class="fixed">
Fixed text visivle in third div
</div>
</div>
<div class="contentblock">Webs content 2</div>
Without defining actual positions for your fixed text to go, it will always default to top: 0; left: 0; of the next parent to have a position: relative;. Defining position will fix your overlapping issue, however, the functionality you are asking for to have text be input in certain divs depending on ID will require javascript/jquery, or even PHP.
I have a html page, having two div's.Left div contains all contents(INDEX of pages) with hyper-links.Now i want to display the content in the right div, that the user has clicked.In right div i have divided the page horizontally into 3 parts..10%,80%,10%.In that 80% horizontal div it shd display the content.I tried by using the target attribute in anchor tag, but it is not showing in that right div.How to solve this?
You can Try This:
css:
div {
width:90%;
height:800px;
position:relative;
background-color:blue;
}
a {
color:white;
font-size:24px;
}
html:
<div id="one">Top of Page</div>
<div id="two">Go to Top</div>
<div id="three">Go to Two</div>
You can try using Iframes. Can refer this site to get started: http://www.dtp-aus.com/frm_sets/frames.html
My issue is this, I have three separate sections in my page that show examples of products/ services, what I need though is to add a toggle div underneath each particular section that can show further details on the product, but the other perviously revealed sections must close when the anchor is clicked.
An example can be seen here: http://www.bamboohr.com/tour.php.
I want to replicate the way in-which the div reveals further info.
Any help would be greatly appreciated, thank you.
Here is my code:
-container-
-section id="services"-
-div-
-a href=""--/a- (!-=== anchor that will open the div ===-)
-/div-
-div--/div-(!-=== div that will open ===-)
-/section-
-section id="services"-
-div-
-a href=""--/a- (!-=== anchor that will open the div ===-)
-/div-
-div--/div-(!-=== div that will open ===-)
-/section-
-section id="services"-
-div-
-a href=""--/a- (!-=== anchor that will open the div ===-)
-/div-
-div--/div-(!-=== div that will open ===-)
-/section-
-/container-
You use utilize the slideToggle functionality of jQuery
Try out the fiddle
HTML
<div class="box">Click div1</div>
<div class="toggle_div">this is the content of toggle div 1</div>
<div class="box">Click div2</div>
<div class="toggle_div">this is the content of toggle div 2</div>
<div class="box">Click div3</div>
<div class="toggle_div">this is the content of toggle div 3</div>
CSS
.box {
margin-bottom: 20px;
}
.toggle_div {
border: 1px solid #000;
background: #000;
color: #fff;
display: none;
}
JS
$('.box').click(function () {
$('.active').slideToggle('slow', function() {
$(this).removeClass('active');
});
$(this).next('div').addClass('active').slideToggle("slow")
});
I want to display a div over an element (especially a link) when hovered, like in Facebook, when you hover a profile picture.
I know this could be done with JavaScript and CSS but have no exact idea.
Facebook's approach is to simply use CSS, which won't work in all browsers. In those browsers Facebook ditches the effect and always shows the element that should only display on hover:
#parent #child {
display: none;
}
#parent:hover #child {
display: block;
}
Use conditional CSS to set display: block as the default in IE7 and below.
This can actually be done with pure css, here is a simple example:
HTML:
<div id='outer'>
<div id='button'>
<!-- your element here -->
</div>
<div id='popup'>
<!-- your popup menu here -->
</div>
</div>
CSS:
#popup {
visibility:hidden;
}
#outer:hover #popup {
visibility:visible;
}
I am new to CSS and Javascript. I want to create a specific area (I use the div tag) in the page where once a link is clicked within, the area will expand and an additional content would be displayed. I managed to create a code which does the job only partially: the new content is displayed after the click but this content is not displayed within the area border. In few words the area is not expanded, only a new content is displayed...any suggestion?
I really like this jQuery accordion method:
Live Demo: http://jsfiddle.net/kbZDv/1/
It's easy to use, style and looks good.
All you need to do is include the latest version of jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
Here is the HTML markup:
<p class="trigger">Click here to expand and reveal more information</p>
<div class="toggle_container">
<div class="block">
<p>Content goes here.</p>
</div>
</div>
The basic (yet to be styled) CSS:
p.trigger{
margin-bottom:7px;
margin-top:-5px;
}
.toggle_container{
margin-bottom:10px;
}
.toggle_container p{
margin:0px;
}
.toggle_container{
background:#f0f0f0;
clear: both;
font-size:100%;
}
And the all important jQuery to make it work:
$(".toggle_container").hide();
$("p.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
});
You could use a jquery plugin like div expand?
http://plugins.jquery.com/plugin-tags/div-expand
or perhaps a jquery exander plugin
http://plugins.learningjquery.com/expander/demo/index.html