I am currently trying to have a part of the text one my website, when clicked scroll to a certain location in the website. I have this code which works, but just jumps, which takes away from the user interface.
The following is the code that I currently have:
Go to Part One!
<div id="part1">Hey Yeah!</div>
Please know that I don't code like that, It is just for the example.
Define a function as here:
function scrollToBox(element, offset) {
var destination = $(element).offset().top - (offset ? offset : 120);
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination }, 1500);
}
Then in onclick event you can call it like following code:
scrollToBox('#part1', 0);
Provided is a PLUNKER and a Snippet that uses jQuery animate(). The details are in the comments in the source.
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<link href='https://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' />
<style>
/* Core~~~~~~~~~~~~~~~*/
html {
box-sizing: border-box;
font: 300 16px/1.428'Quicksand';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
position: relative;
font-size: 1rem;
line-height: 1;
height: 100vh;
width: 100vw;
overflow-x: hidden;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #000;
color: #eee;
display: table;
}
h1,
h2,
h3,
h4,
h5,
h6,
legend {
font-variant: small-caps;
margin-bottom: 15px;
color: #Fc3;
text-align: center;
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.4rem;
}
h3 {
font-size: 1.3rem;
}
legend {
font-size: 1.35rem;
}
p {
margin: 0 5px 15px;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 20px auto;
}
a {
color: #Fc0;
text-decoration: none;
margin: 10px 20px;
display: inline-block;
font-size: 1.5rem;
font-weight: 700;
}
a:hover {
color: #CCC;
}
header {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
border-bottom: 3px outset #bbb;
height: 80px;
z-index: 11;
background: #000;
text-align: center;
}
footer {
position: relative;
bottom: 0;
left: 0;
right: 0;
width: 100%;
border-top: 3px outset #bbb;
text-align: center;
height: 80px;
z-index: 11;
background: #000;
margin: 0 auto;
}
.content {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
padding: 20px;
}
.sec {
width: 92%;
height: auto;
border: 5px ridge #999;
border-radius: 12px;
margin: 20px auto;
}
</style>
</head>
<body>
<header>
<nav id="top">To End
</nav>
</header>
<section class="sec">
<article class="content">
<iframe src='http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll' scrolling='no' frameborder='0' width='100%'></iframe>
</article>
</section>
<main id='main'>
<article class="content">
"'I had NOT!' cried the Mouse, sharply and very angrily. 'A knot!' said Alice, always ready to make herself useful, and looking anxiously about her. 'Oh, do let me help to undo it!' 'I shall do nothing of the sort,' said the Mouse, getting up and walking
away. 'You insult me by talking such nonsense!' 'I didn't mean it!' pleaded poor Alice. 'But you're so easily offended, you know!' The Mouse only growled in reply. 'Please come back and finish your story!'
</article>
<article class="content">
Alice called after it; and the others all joined in chorus, 'Yes, please do!' but the Mouse only shook its head impatiently, and walked a little quicker. 'What a pity it wouldn't stay!' sighed the Lory, as soon as it was quite out of sight; and an old
Crab took the opportunity of saying to her daughter 'Ah, my dear! Let this be a lesson to you never to lose YOUR temper!' 'Hold your tongue, Ma!' said the young Crab, a little snappishly. 'You're enough to try the patience of an oyster!' 'I wish
I had our Dinah here, I know I do!' said Alice aloud, addressing nobody in particular.
</article>
<article class="content">
'She'd soon fetch it back!' 'And who is Dinah, if I might venture to ask the question?' said the Lory. Alice replied eagerly, for she was always ready to talk about her pet: 'Dinah's our cat. And she's such a capital one for catching mice you can't think!
And oh, I wish you could see her after the birds! Why, she'll eat a little bird as soon as look at it!' This speech caused a remarkable sensation among the party. Some of the birds hurried off at once: one old Magpie began wrapping itself up very
carefully, remarking, 'I really must be getting home; the night-air doesn't suit my throat!' and a Canary called out in a trembling voice to its children, 'Come away, my dears! It's high time you were all in bed!'"
</article>
<article class="content">
"Death!" I shouted. "Death is coming! Death!" and leaving him to digest that if he could, I hurried on after the artillery-man. At the corner I looked back. The soldier had left him, and he was still standing by his box, with the pots of orchids on the
lid of it, and staring vaguely over the trees. No one in Weybridge could tell us where the headquarters were established; the whole place was in such confusion as I had never seen in any town before. Carts, carriages everywhere, the most astonishing
miscellany of conveyances and horseflesh. The respectable inhabitants of the place, men in golf and boating costumes, wives prettily dressed, were packing, river-side loafers energetically helping, children excited, and, for the most part, highly
delighted at this astonishing variation of their Sunday experiences. In the midst of it all the worthy vicar was very pluckily holding an early celebration, and his bell was jangling out above the excitement.
</article>
<article class="content">
I and the artilleryman, seated on the step of the drinking fountain, made a very passable meal upon what we had brought with us. Patrols of soldiers--here no longer hussars, but grenadiers in white--were warning people to move now or to take refuge in
their cellars as soon as the firing began. We saw as we crossed the railway bridge that a growing crowd of people had assembled in and about the railway station, and the swarming platform was piled with boxes and packages. The ordinary traffic had
been stopped, I believe, in order to allow of the passage of troops and guns to Chertsey, and I have heard since that a savage struggle occurred for places in the special trains that were put on at a later hour.
</article>
<article class="content">
We remained at Weybridge until midday, and at that hour we found ourselves at the place near Shepperton Lock where the Wey and Thames join. Part of the time we spent helping two old women to pack a little cart. The Wey has a treble mouth, and at this
point boats are to be hired, and there was a ferry across the river. On the Shepperton side was an inn with a lawn, and beyond that the tower of Shepperton Church--it has been replaced by a spire--rose above the trees. Here we found an excited and
noisy crowd of fugitives. As yet the flight had not grown to a panic, but there were already far more people than all the boats going to and fro could enable to cross. People came panting along under heavy burdens; one husband
</article>
</main>
<section class="sec">
<article class="content">
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
</article>
</section>
<footer>
<nav id="end">To Top
</nav>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
//Delagate: click event to all anchors
$("a").on('click', function(event) {
//Condition: If this anchor has "href=#" then...
if (this.hash !== "") {
//Inhibit: Default behavior of anchor
event.preventDefault();
//Store anchor's "#"
var hash = this.hash;
/*
||Target the root and parent of page content.
||.animate() scrolling from clicked anchor to
||location designated by the anchor's hash.
*/
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
//return anchor behavior to anchor
window.location.hash = hash;
});
}
});
});
</script>
</body>
</html>
Related
I have a cool design and try to transfer it to a website.
What I want is basically shown on the picture below. I want a shape behind headlines.
I've seen a canvas solution once on a template, but I don't know how they did it.
Obviously I can’t use simple background-image, because the headlines are different long/ height.
So my idea is to grab the SVG.js – library ( svgjs.dev ) or something similar and put a foreach js script.
Get headline dimensions and draw a canvas/ SVG. Position the canvas/ SVG via CSS as relative.
Do anyone got an idea? Thank you.
It's possible to achieve this design if you use:
inline-block elements
a background-size style set to 100% (or contains if you don't want it to fit the whole width and height element)
an SVG background image (prettier than bitmaps)
So You could set this style for such elements (background-repeat style seems to be removable):
header, h1, h2 /* whatever... */
{
background-image:url("your_fantastic_resizable_background.svg");
background-size: 100% 100%;
background-repeat:no-repeat;
display: inline-block;
}
Thus, this design is kind of flawed: if two inline-block styled elements follow each in the code flow, the last will be appended next to the first, which is not you probably want. Hence, you'll have to insert between a line-break between:
<header>
<span>Test</span>
<span>For a great logo</span>
</header>
<br/> <!-- sad. -->
<h1>Test 1</h1>
Below a working snippet made with a GNU Head logo (Free Art License 1.3).
header,
h1,
h2,
h3,
h4 {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/22/Heckert_GNU_white.svg");
background-size: 100% 100%;
background-repeat: no-repeat; /* seems to be not useful ... */
display: inline-block;
font-family: sans-serif;
color: white;
text-shadow: 0px 0px 3px black;
}
header {
font-size: 4em;
}
header span::after {
content: "\A";
white-space: pre;
}
<header>
<span>Test</span>
<span>For a great logo</span>
</header>
<br/>
<h1>Test 1</h1>
<p>A first very good looking sentence.</p>
<h2>Test 2</h2>
<p>A second very good looking sentence.</p>
<h3>Test 3</h3>
<p>A third very good looking sentence.</p>
<h4>Test 4</h4>
<p>A fourth very good looking sentence.</p>
Thank you, Amessihel, but this is not what I needed.
A background-image with background-size of 100% for a variable height/ length headline-object would look in the end like....not well done.
But somehow you pointed me in the right direction. I mean, I am not super happy with this solution, because it's height-limited - but it's working for now.
I just used the :before and :after selector to split the image how I needed.
<style id="SCSS">
h1, h2 {
position: relative;
background: #087f89;
display: inline-block;
padding: 0 20px 0 23px;
color: whitesmoke;
&:after {
content: "";
position: absolute;
height: 100%;
right: 0;
top: 0;
width: 6px;
background-image: url(https://i.imgur.com/Amv4TJp.png);
background-repeat: no-repeat;
background-position: bottom 0 left 0;
}
&:before {
content: "";
position: absolute;
height: calc(100% + 14px);
width: 30px;
background-image: url(https://i.imgur.com/o9bsJN5.png);
background-repeat: no-repeat;
background-position: bottom 0 left 0;
left: 0;
top: 0;
}
}
</style>
<article class="post-2 page type-page status-publish hentry" id="post-2">
<header class="entry-header">
<h1 class="entry-title">Headline</h1>
</header><!-- .entry-header -->
<div class="entry-content">
<p>This is an example page. It’s different from a blog post because it will stay in one place and will show up
in your site navigation (in most themes). Most people start with an About page that introduces them to
potential site visitors. It might say something like this:</p>
<p>…or something like this:</p>
<p>As a new WordPress user, you should go to your dashboard
to delete this page and create new pages for your content. Have fun!</p>
<h2>Headline as well</h2>
<p>This is an example page. It’s different from a blog post because it will stay in one place and will show up
in your site navigation (in most themes). Most people start with an About page that introduces them to
potential site visitors. It might say something like this:</p>
</div><!-- .entry-content -->
</article>
Here is my fiddle : https://jsfiddle.net/smatplacid/pwaLuzdo/3
I'd like to simplify this javascript code,
but I don't have ability to do this,
plz help me, I will really appreciate it, thank you very much!
$(function() {
$("#show1").click(function() {
$("#showmore1").toggle();
})
$("#show2").click(function() {
$("#showmore2").toggle();
})
$("#show3").click(function() {
$("#showmore3").toggle();
})
})
[2016/05/24] Here is my complete code, https://jsfiddle.net/o970b9cn/
sorry for my missing information.
I'd like to show many reviews, but it will hide the complete information first, when the user clicks on the button, to start the full text.
I tried the answer below yesterday, but it still can not run...sorry for my insufficient ability...
Give common class to each "show<your_id>". e.g. showmore
give some attribute to your element like data-showid, which contains id of toggle element.
For class "showmore", write click function
Like this
<a id="show1" class="showmore" data-showid="showmore1" >show more</a>
<a id="show2" class="showmore" data-showid="showmore2" >show more</a>
<a id="show3" class="showmore" data-showid="showmore3" >show more</a>
<script>
$(function() {
$(".showmore").click(function() {
var this_button = $(this);
$("#"+this_button.attr("data-showid")).toggle();
})
})
</script>
Use Attribute Starts With Selector [name^=”value”]
Selects elements that have the specified attribute with a value beginning exactly with a given string.
$(function() {
$("a[id^='show']").click(function() {
$(this).prev('div').find('span[id^="showmore"]').toggle();
});
});
$(function() {
$("a[id^='show']").click(function() {
$(this).prev('div').find('span[id^="showmore"]').toggle();
});
});
#import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
#import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);
#import url(https://fonts.googleapis.com/css?family=Nunito:300);
*,
html,
body {
/*font-family: 'Noto Sans TC', 'Nunito', sans-serif;
font-weight: 300;*/
font-family: 'cwTeXYen', 'Nunito', sans-serif;
font-weight: lighter;
font-size: 16px;
letter-spacing: .2pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="parents_reviews" style="background: #fff; width: 300px; text-align: center; padding: 15px 20px; border-radius: 25px;">
<div style="color: #6bc4ea; font-size: 15px;">Two more earthquakes hit this month. They are not as bad, however. Only one person dies.Someone films the streets when the earthquakes hit. People are scared. They run in the streets.<span id="showmore1" style="display: none; font-size: 15px;">Difficult words: earthquake (when the ground moves), damage (to break), infrastructure (the roads, power supplies, and buildings that people need)</span>
</div>
(read more)
</div>
<div class="parents_reviews" style="background: #fff; width: 300px; text-align: center; padding: 15px 20px; border-radius: 25px; margin-top: 30px;">
<div style="color: #6bc4ea; font-size: 15px;">Two more earthquakes hit this month. They are not as bad, however. Only one person dies.Someone films the streets when the earthquakes hit. People are scared. They run in the streets.<span id="showmore2" style="display: none; font-size: 15px;">Difficult words: earthquake (when the ground moves), damage (to break), infrastructure (the roads, power supplies, and buildings that people need)</span>
</div>
(read more)
</div>
<div class="parents_reviews" style="background: #fff; width: 300px; text-align: center; padding: 15px 20px; border-radius: 25px; margin-top: 30px;">
<div style="color: #6bc4ea; font-size: 15px;">Two more earthquakes hit this month. They are not as bad, however. Only one person dies.Someone films the streets when the earthquakes hit. People are scared. They run in the streets.<span id="showmore3" style="display: none; font-size: 15px;">Difficult words: earthquake (when the ground moves), damage (to break), infrastructure (the roads, power supplies, and buildings that people need)</span>
</div>
(read more)
</div>
Fiddle Demo
You can use each, simply you will iterate the function on each element that has the same attribute, in this case we will use class because the id should be unique.
We will give to each container (#show1 #show2 ...) a class such show and make this function https://jsfiddle.net/sL3qk853/
$('.show').each(function (index, elem) {
$(elem).on('click', function () {
$(this).find('div[id^="showmore"]').toggle();
});
});
If you have more than a div in the container you can specify the selected div by using begin with selector ( div[attribute^="something"] ) with a find , or just use children if you have a one div or want to make this on all the divs inside the .show container $(this).children().toggle(); .
Edit: instead of using class and each you can do this
$('div[id^="showCont"]').on('click', function () {
$(this).children().toggle();
});
div {
width: 100px;
height: 100px;
background-color: #eee;
margin: 1px;
float: left
}
div[id^="showmore"] {
background-color: #3498db;
float: left
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showCont1">
<div id="showmore1">
</div>
</div>
<div id="showCont2">
<div id="showmore2">
</div>
</div>
<div id="showCont3">
<div id="showmore3">
</div>
</div>
I have a grid of images. When someone hovers over an image, I would like the correlated text to drop down under the row that image is in, and push the next row down.
Currently, the other images in the same row also drop down. How can I make them stay still?
Here is my code, but it is you can see it in action here: http://jsfiddle.net/VtvG8/
CSS
#cook-it-raw-container{
margin: 0px auto;
width: 980px;
font-family: Dax,Helvetica,Arial,sans-serif;
position: relative;
color: #000;
}
#cook-it-raw-container div.sidebar{
display: inline-block;
vertical-align: top;
width: 488px;
}
img.chef-pic{
width: 129px;
height: 120px;
display: inline-block;
margin: 8px;
cursor: pointer;
}
div#sidebar-chefs div.chef-story{
width: 454px;
font-size: 13px;
margin: 10px 0;
position: relative;
left: 0;
display: none;
}
HTML
<img class="chef-pic" src="lp_cookitraw_sidebarA_02.jpg" border="0" alt="Albert Adrià" height="118" width="136" />
<div class="chef-story">
<h3>Albert Adrià</h3>
<h4>Tickets, 41°, Barcelona, Spain</h4>
<p>From working with older brother, Ferran Adrià, at the iconic elBulli restaurant, to maintaining his kingdom of culinary innovation with an ever-expanding empire of new restaurants in Barcelona, Adrià’s bold ideas continue to advance modernist Spanish gastronomy.</p>
</div>
<img class="chef-pic" src="lp_cookitraw_sidebarA_14.jpg" border="0" alt="dan barber" height="117" width="135" />
<div class="chef-story">
<h3>dan barber</h3>
<h4>Blue Hill at Stone Barns, New York</h4>
<p>Chef, writer, educator, and fierce advocate for better choices in sustainable agriculture, Dan Barber is a creative and culinary force in pursuit of nurturing what nurtures us.</p>
</div>
JQUERY
$(document).ready(function(){
$("img.chef-pic").mouseenter(function(){
$(this).next(".chef-story").slideToggle();
});
$("img.chef-pic").mouseleave(function(){
$(this).next(".chef-story").slideToggle();
});
});
I thought about position absolute, but then the row below will not drop down; I would like for the next row to be pushed down too. I have searched SO and Google but can't find anything that helps in this particular situation. Thanks in advance for your replies.
Use float:left in
div#sidebar-chefs div.chef-story{}
Jsfiddle http://jsfiddle.net/VtvG8/3/
I am a newbie to Javascript, I have code I found on the internet for a drop-down FAQ file which works OK. What I cannot work out is how to adapt it to show toggle triangles - point right normally, point down when the answer drops down (as in here http://www.facebook.com/help/182071178590498/).
The main code is this:
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle('slow');
});
});
</script>
<style type="text/css">
#faq {
width: 100%;
}
#faq dt {
color: #2763A5;
cursor: pointer;
margin: 8px 0;
padding: 0;
}
#faq dd {
border: 1px solid #BABAC0;
padding: 0;
margin: 0;
background-color: #FFFFE1;
}
#faq dd p {
padding: 10px;
margin: 0;
}
</style>
The FAQs and answers work with one dl line + this repeating element:
<dl id="faq">
<dt>
What are the benefits of solar energy?
</dt>
<dd><p>
When you install Solar water heating in your home, you will reduce your impact on the environment. The system will pay for itself whilst reducing your fuel bills.
</p></dd>
The whole page can be seen here
http://contemporaryenergy.co.uk/faqs.htm
Any suggestions will be gratefully received. Patrick
I didn't look at your code but typically you solve this by setting an extra CSS-class. Your default class could be:
.item {
background-image: url("triangle.png");
}
Then you add/remove a class that replaces, or offsets the background image (if you're using a sprite)
.item.open {
background-image: url("triangle-open.png");
// or
background-position: 0 -50px;
}
so I wanted an animated footer for my webpage using jquery. There's supposed to be a button which should trigger the animation. I found a nice example for all this, and everything is fine and dandy. Except that the button (including the footer) has this code that makes it stick to the bottom of your web browser, rather than to the bottom of the page. I do [i]not[/i] want it to, like, "scroll" along with the page, I realy want it to be underneath all my other divs. I tried putting it in the div container (which has all my other divs in it as well), but that doesn't seem to work.
Now, (after 2.5 hours of googling) I found out that it might/may/could have something to do with "absolute" positioning in the CSS, so I tried switching some things around such as giving the footer's container a relative position or giving it an "overflow: hidden;" along with the rest a left float but nothing seemed to solve my problem. (I could've done something wrong, not that great with CSS after all :-/)
I hope someone is able/willing to help.
P.S. Here's the example I used:
http://return-true.com/2010/04/jquery-pop-up-footer-version-2/
and here's the code:
Javascript:
jQuery(function($) {
var open = false;
$('#footerSlideButton').click(function () {
if(open === false) {
$('#footerSlideContent').animate({ height: '300px' });
$(this).css('backgroundPosition', 'bottom left');
open = true;
} else {
$('#footerSlideContent').animate({ height: '0px' });
$(this).css('backgroundPosition', 'top left');
open = false;
}
});
});
HTML:
<div id="footerPlacement">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent">
<div id="footerSlideText">
<h3>Hey! I'm a Sliding Footer</h3>
<p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
<p>What can you use me for? Well look at all this stuff:</p>
<ul>
<li>Sales information</li>
<li>Important updates</li>
<li>Unobtrusive about panel</li>
<li>Or just a good ol' footer</li>
</ul>
<p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
</div>
</div>
</div>
</div>
CSS:
#footerPlacement {
margin-bottom: 0px;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#footerSlideContainer {
position: fixed;
margin-left: 0px;
bottom:0px;
width: 1000px;
}
#footerSlideButton {
background: url('../images/footer/footerbtn.png') top left no-repeat transparent;
position: absolute;
top: -55px;
right: 20px;
width:50px;
height:50px;
border: none;
cursor: pointer;
}
#footerSlideContent {
width: 100%;
height: 10px;
background: #251b15;
color: #CCCCCC;
font-size: 0.8em;
border: none;
font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
padding: 15px 10px 25px 25px;
}
Thanks in advance!
if you change your #footerPlacement to include position:relative, you can change #footerSlideContainer to be position:absolute and then your footer will sit below any content above it.
However you will need to make the content have a min-height of around 350px for the footer to work properly and if your content isn't long enough, the footer won't be at the bottom of the browser.
I also added overflow:hidden to #footerSlideContent. I have made a fiddle to demonstrate:
http://jsfiddle.net/tc6b8/