I have been told that this isn't possible via CSS alone and so have turned to javascript.
Using onmouseover but I cannot get the hidden element to appear. I want it so that when hovering over element with ID #a, element with class .excerpt-box appears and then disappears when the mouse is moved away.
Does anyone know where I am going wrong? Thanks
Here's the code I've written so far:
The CSS includes visibility hidden for .excerpt-box.
<div class="ind-circle" id="a" onmouseover="showExcerpt()">
<p class="circle-title"> Read more</p>
</div>
<div class="excerpt-box" id="b">
<h1 class="excerpts-title">This is an example excerpt title...</h1>
<img class="excerpts-fi" src="<?php echo BASE_URL . '/assets/images/water.jpg'; ?>" alt="">
<p class="excerpts-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
function showExcerpt() {
document.getElementByClass('excerpt-box').style.visibility = 'visible';
}
First, the function you are looking for is document.getElementsByClassName.
After this you have to select a particular element by index. See this link.
Better would be this solution:
Grab the id of the div (id='b') and set display to block.
As you can see, the div is display:none; at startup.
function showExcerpt() {
document.getElementById('b').style.display = 'block';
}
.excerpt-box {
display: none;
}
<div class="ind-circle" id="a" onmouseover="showExcerpt()">
<p class="circle-title"> Read more</p>
</div>
<div class="excerpt-box" id="b">
<h1 class="excerpts-title">This is an example excerpt title...</h1>
<img class="excerpts-fi" src="<?php echo BASE_URL . '/assets/images/water.jpg'; ?>" alt="">
<p class="excerpts-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Your HTML structure allows to do the same via CSS as well.
.excerpt-box goes right after the .ind-circle and can be targeted via adjacent sibling combinator.
.excerpt-box {
display: none;
}
.ind-circle:hover + .excerpt-box {
display: block;
}
Related
I am using anchor tags to link navbar to the headers inside of a div on same page. When I click on the last header it shows up in the middle of the container instead of at the very top.
I want the bottom header to show up at the very top of the container and leave some white space below it.
Here is codepen https://codepen.io/sasha-code/pen/qBOyBrW
Is there an html way to do it? if not, is there a js way to add white space dynamically below the last section to make sure the header is at the top.
PS. I know this is happening because there is no scroll left. I want to somehow add it dynamically. I don't want to add hardcoded white space.
<div>
<a href='#top'>Top</a>
<a href='#middle'>Middle</a>
<a href='#bottom'>Bottom</a>
</div>
<div class="content">
<div>
<h2 id="top">Header Top</h2>
text
</div>
<div>
<h2 id="middle">Header Middle</h2>
text
</div>
<div>
<h2 id="bottom">Header Bottom</h2>
text
</div>
You could set the min-height of the last div section to 100% of the parent:
.content {
height: 400px;
width: 300px;
overflow:scroll;
}
#last {
min-height: 100%;
}
<div>
<a href='#top'>Top</a>
<a href='#middle'>Middle</a>
<a href='#bottom'>Bottom</a>
</div>
<div class="content">
<div>
<h2 id="top">Header Top</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div >
<h2 id="middle">Header Middle</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="last">
<h2 id="bottom">Header Bottom</h2>
Lorem ipsum dolor sit amet.
</div>
</div>
Put this code at the end of your file:
<br> <br> <br>
Now it should work fine 😊
Here is my code:
<div id="authorarea">
<img alt="" src="#" height="70" width="70">
<p class="written">
Written by: Steven Stamkos
</p>
<div class="authorinfo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="authorarea">
<img alt="" src="#" height="70" width="70">
<p class="written">
Written by: Nikita Kucherov
</p>
<div class="authorinfo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
The only differences are the "title" and the content inside of the a tag.
I tried to do something like this but I am not grabbing the title correctly:
if ($('#authorarea .written a').attr('title', 'Steven Stamkos')) {
$('#authorarea .authorinfo').append('<div>test</div>');
} else if ($('#authorarea .written a').attr('title', 'Nikita Kucherov')) {
$('#authorarea .authorinfo').append('<div>test2</div>');
}
So I'm looking for suggestions on how to target the title correctly or the content inside of the a tag. Any help is much appreciated and I hope I explained what I'm trying to do properly enough.
Your current code
if ( $('#authorarea .written a').attr('title', 'Steven Stamkos') ) {}
sets the attribute to the given value and then returns a jQuery object which naturally evaluates to true.
What you probably want is
if ( $('#authorarea .written a').attr('title').localeCompare('Steven Stamkos') === 0 ) {}
I'm trying to use slideToggle() function to apply "less and more" behavior to a paragraph which contain a ".more" class:
html code:
<p class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut...
<span class="HiddenText" style="display: none;">
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
</span>
<a class="readmore" href="" style="display: block;">show more</a>
</p>
here is my JS code:
$(document).ready(function() {
$('.readmore').click(function(){
var text = $(this).text() == 'show more' ? 'show less' : 'show less';
$(this).text(text);
$(this).prev().slidetoggle();
// here the problem
// $(this).prev() eq $('.hiddenText')
// slideToglle transforme "display:none" property to "display:inline-block"
return false;
});
});
I apply the slideToggle function to span.hiddenText element, but this function transform "display: none" to "display: inline-block", I want to toggle between "display: none" and "display: inline".
onclick behavior : using slideToggle() function:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
onclick behavior : using toggle() function:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
problem: slideToggle function create a return line in the paragraph.
normally, since I used a span which the display property is an inline, slideToggle must use a display:inline instead of display:inline-block.
Note: when I use toggle() in place of slideToggle() it work perfectly (display:none to display:inline)
how can I do to use slideToggle between display:none and display:inline?
You can use callback function for changing the style.
$('.readmore').click(function(){
$(this).prev().slideToggle("fast", function()
{
if(this.style.display !== "none")
this.style.display = "inline";
});
});
I hope it helps.
Give this a shot:
HTML:
<p>Lorem ipsum dolor sit amet, has at tractatos voluptaria. Pri ne ipsum primis apeirian, mel an menandri instructior. <span class="hide"> Cum quando nominati iracundia te. His tollit eripuit lucilius at, mei quis volutpat deseruisse ex, dicunt habemus iudicabit et qui. Ad voluptua insolens mel, ei enim esse tamquam nam.</span><a id="clickme" href="#">Read more...</a>
</p>
jQuery:
$(function () {
$("#clickme").click(function () {
$(".hide").slideToggle("slow", function () {
$('span.hide').toggleClass('show');
});
});
});
CSS:
.hide {
display: none;
}
.show {
display: inline;
}
The read more link is just a generic placeholder link that goes nowhere, but clicking it fires the jQuery, which slideToggles the text, which then fires a function to replace the class with the show class, thus the display should be set to inline instead of inline-block.
I have a working fiddle, but the site won't let me save it to share at the moment.
Can someone tell me how to scroll the content.
For example I have a link like this
content3
When the user click that link I would like to scroll the content to div content3.
Can someone tell me how to do this using jQuery?
Here is my full code.
<div class="container">
<div class="nav">
<ul>
<li><a class="active" href="#">content1</a></li>
<li>content2</li>
<li>content3</li>
<li>content4</li>
</ul>
</div>
<div id="content">
<div id="content1" class="content1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content2" class="content2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content3" class="content3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content4" class="content4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
You don't need jQuery to do this - simply use href="#content3" to scroll to the element with an id of "content3".
Using scrollTop :
Example :
<a scrollTo="content3" href="#">click me to scroll to the div "content3"</a>
$(document).ready(function(){
$('a').on('click',function(){
$("#container").animate({ scrollTop: $('#'+$(this).attr('scrollTo')).offset().top }, 1000);
});
});
jQuery has scrollTop and scrollLeft methods to do this.. if it is merely vertical scrolling, then scrollTop(yVal) will do the trick
http://api.jquery.com/scrollTop/
Don't know what you are attempting to do, but go check out wowslider.com
Using the $('body').scrollTop atribute like so:
$('#button1').click(function(){
var element = $('#content1'),
elemTop = element.offset().top, // You get the element top to know where to move the window
windowTop = elemTop + 20; // You can add some pixels so the element dont be shown on the very edge
$("html, body").animate({
scrollTop: windowTop // Animate the change so it doesnt seem invasive
}, "fast");
}
});
Try this...
$('a').on('click', function (){
$('html,body').animate({
scrollTop: $('#'+$(this).text()).offset().top},
'slow');
});
See this JsFiddle Example
Greetings...
Based on your markup it appeared you wanted to use the anchor text to determine where to scroll. If you click the content1 link it will scroll you to <div id="content1">.
$('.nav ul li a').click(function(){
$('html, body').animate({
scrollTop: $('#' + $(this).text()).offset().top
}, 2000);
});
Heres a fiddle as an example: http://jsfiddle.net/ZG3zh/
In order to scroll with HTML you need to set the href of the anchor #+'id of element' you are scrolling to.
Example:
I want to scroll to <div id="scrollHere">Hello World</div>
using an anchor tag or a use the code, Click Me!
I'd really like to be able to "activate" / "open" a Zurb Foundation Accordion via the URL with the accordion pane in questions hash.
So like example.com/page#accordion1
Is this possible already with Foundation or is it easy to implement? I honestly haven't got a clue :-/
Thanks in advance for any help given!
You can do this by adding an unique attribute to each accordion title <div class="title" data-ref="panel-1"> In this case I added a data-ref attribute. Then you will need to add some jQuery to look at the hash and if it is a accordion panel, then click that panel.
HTML
<ul class="accordion">
<li class="active">
<div class="title" data-ref="panel-1">
<h5>Accordion Panel 1</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<div class="title" data-ref="panel-2">
<h5>Accordion Panel 2</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<div class="title" data-ref="panel-3">
<h5>Accordion Panel 3</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
</ul>​
jQuery
jQuery(function() { // Document ready shorthand
// Get the hash and remove the #
var hash = window.location.hash.replace('#', '');
if (hash != '') {
// Cache targeted panel
$target = $('.title[data-ref="' + hash + '"]');
// Make sure panel is not already active
if (!$target.parents('li').hasClass('active')) {
// Trigger a click on item to change panel
$target.trigger('click');
}
}
});​
View in action
Edit code
One note: When in jsfiddle edit the hash will not work. Need to view in the full mode.
UPDATE
If you want to have a link that opens up a panel and updates hash. You will need to add a specific class to the link. In my example I add panel-btn
HTML
Goto Panel 2
jQuery
$('.panel-btn').click(function(e){
// Get the links href and remove the #
target_hash = $(this).attr('href').replace('#','');
// Click targeted panel
$('.title[data-ref="' + target_hash + '"]').trigger('click');
// Update hash, so that if page is refreshed, target panel will open
window.location.hash = target_hash;
// Stop all default link functionality
return false;
});
Updated jsfiddle view
Updated jsfiddle code
If you are looking for more of a history thing when each panel is clicked. You will need to add a click event to each .title and get its data-ref and change the hash to that, like this:
$('.title').click(function(){
// Get the data-ref
hash = $(this).attr('data-ref');
// Set hash to panels hash
window.location.hash = hash;
});
If you are using Foundation 5:
Foundations Accordion has a custom event click.fndtn.accordion you can use. It will take care of the proper open/closed states:
jQuery(document).ready(function($) {
var hash = window.location.hash;
if (hash != '') {
$('[data-accordion] [href="' + hash + '"]').trigger('click.fndtn.accordion');
}
});
See the example here, it will programatically open the second tab upon page load by detecting a window hash (simulated by a dummy hash in the code):
http://jsfiddle.net/ynyrrm99/
Link to the page without setting the a link to data-tab or any other settings. As of foundation 5.5.1 it will parse the uri with a hash on page load... meaning it doesn't matter how you set the originating link.
Set a variable to the hash in the URL, give the content panel div the same id as in your hash. Then add a class of .active to the panel with the same id as your link.
if(window.location.hash) {
var hash = window.location.hash;
$( hash ).addClass( "active" );
}