I feel like a moron. I'm experimenting with zurb foundation sections. I'm on the latest version 4.3.1.
I'm following the docs they have here: http://foundation.zurb.com/docs/components/section.html and i'm getting wierd behaviour when navigating results. see screenshots below. What am I doing wrong?
Here's my code
<form data-abide action="">
<div class="row">
<div class="small-24 columns">
<div class="section-container auto" data-section>
<section class="section">
<p class="title" data-section-title>Panel 1</p>
<div class="content" data-section-content><p>Content of section 1.</p></div>
</section>
<section class="section">
<p class="title" data-section-title>Panel 2</p>
<div class="content" data-section-content><p>Content of section 2.</p></div>
</section>
<section class="section">
<p class="title" data-section-title>Panel 3</p>
<div class="content" data-section-content><p>Content of section 3.</p></div>
</section>
<section class="section">
<p class="title" data-section-title>Panel 4</p>
<div class="content" data-section-content><p>Content of section 4.</p></div>
</section>
</div>
</div>
</div>
</form>
Use
dysplay:none
for non-active content and
dysplay:block
for active
argh. My bad. I thought I had upgraded foundation, but it turns out something was screwy with my rubygems environment paths.
After really upgrading to 4.3.1 the issue isn't there anymore.
Related
I am using fullpage.js and the scroll does not work after the 'intro' class section. I am able to move upwards in the webpage but while moving downwards it stops after the 'intro' class section. I even tried using normalScrollElements but it still does not work. The code is as below:
<div id="fullpage">
<div class="section">
Hello
</div>
<div class="section">
Hello
</div>
<div class="section">
Hello
<div class="intro">
/* Dummy Text */
</div>
</div>
<div class="section">
Hello
</div>
</div>
Link to Codepen: https://codepen.io/yash9051/pen/rNpXNYJ
I want to use section tag in my program so which is right way for using section tag for inside of program...
<section id="training-pg">
<div class="row">
<div class="container">
// Write you code here.
<h3>the title</h3>
<p><?php the_field('training_program'); ?></p>
</div>
</div>
</section> // Or
<div class="container-fluid">
<div class="row">
<section id="training-pg">
<h3>the title</h3>
<p><?php the_field('training_program'); ?></p>
</section>
</div>
</div>
The semantic way to use <select>, according to W3Schools, is:
A section is a thematic grouping of content, typically with a heading
And according to MDN:
The HTML <section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document. Typically, but not always, sections have a heading.
Seeing as your first example has a section with an ID which clearly defines the purpose of the section, as well as a heading, I would say that this:
<section id="training-pg">
<div class="row">
<div class="container">
<h3>the title</h3>
<p><?php the_field('training_program'); ?></p>
</div>
</div>
</section>
Is the correct and most semantic way to use <section>.
The first way is the proper way to use the section tag.
<section id="training-pg">
<div class="row">
<div class="container">
// Write you code here.
<h3>the title</h3>
<p><?php the_field('training_program'); ?></p>
</div>
</div>
</section>
The first way is correct way to use the section tag
I am trying to create a horizontally scrolling website, but it feels that I am at a dead end. The website I want to create shouldn't have a horizontal scrollbar and it needs to "jump" from page to page when using the navigation links.
Here is a basic version of the website I currently have - Horizontal Scrolling Project
What I am trying to achieve:
The navigation links should be the only way of navigating and scrolling should have no effect on navigation.
Each module should be on a single page and it's very important that when a module is higher than the height of the page, it is able to scroll to the bottom of the module. The navbar and footer should also always be visible.
And last but not least, it should be able to work with Bootstrap 4.
Please note that I am not expecting someone to do this entire project for me, but rather that if someone could help me or knows of any resources I could check out, I would really appreciate it!
Code:
<html>
<body>
<div class="bar">
<div class="container-fluid">
<div class="row">
<div class="col text-left">
<p>👈</p>
</div>
<div class="col text-center">
<span class="main-link">
Download
</span>
</div>
<div class="col text-right">
<p>👉</p>
</div>
</div>
</div>
</div>
<div class="main">
<div class="container">
<div class="row">
<!--MODULE START-->
<div class="module col-sm-12 offset-sm-0 col-md-10 offset-md-1 col-10 offset-1 text-center">
<p class="title">01</p>
</div>
<!--MODULE END-->
<!--MODULE START-->
<div class="module col-sm-12 offset-sm-0 col-md-10 offset-md-1 col-10 offset-1 text-center">
<p class="title">02</p>
</div>
<!--MODULE END-->
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>Made by Jeroen</p>
</div>
</footer>
</body>
</html>
I'm using the fabulous fullpage.js to make a single page website.
Here's the basic code:
<div id="fullpage">
<div class="section" id="section0">
<h1>Page 0</h1>
<p>Some text 0</p>
</div>
<div class="section" id="section1">
<h1>Page 1</h1>
<p>Some text 1</p>
</div>
<div class="section" id="section2">
<h1>Page 2</h1>
<p>Some text 2</p>
</div>
</div>
What I can't figure out is how to include a link in section 0 to section 2 (i.e. just a standard <a href> link). I've been messing around with anchors but can't get it to work.
You only need to use the anchors option and then use normal links:
$('#fullpage').fullpage({
anchors: ['section1', 'section2', 'section3', 'section4']
});
The link should look normally, but prefixed bye #:
Link to section 3
Live example
Your URLs will look like:
http://yoursite.com/#section1
http://yoursite.com/#section2
http://yoursite.com/#section3
http://yoursite.com/#section4
Now it is also possible to use the html attribute data-anchor="section1" in each section in order to define the anchor for it. For example:
<div id="fullpage">
<div class="section" data-anchor="section1">Section 1</div>
<div class="section" data-anchor="section2">Section 1</div>
</div>
I'm trying to automate a clicking of a link within a class list. Currently I have a working script that will pick the first item in the container using the querySelector(), one line of code wrapped in a function.
To have more usability, I was wondering if I could modify the code so that the script searches within each item in the container trying to match a title of the listing or name with a defined variable, to the users desire, and once found, clicks the link for that particular item.
<div class="item-wall">
<div class="grid-item" data-column-index="0" data-pdpurl="http://www.LINK1.com">
<div class="grid-item"> … </div>
<div class="content">
<div class="grid-item-details-wrapper">
<div class="grid-item-image"> … </div>
<div class="grid-item-info-wrapper no-chipper">
<a href="http://www.LINK1.com">
<div class="product-name">
<p class="griditem-display-name nsg-font-size--regular nsg-text--dark-grey">
PRODUCT1
</p>
<p class="griditem-subtitle nsg-font-size--regular nsg-text--medium-grey"> … </p>
</div>
<div class="product-price-wrapper"> … </div>
</a>
</div>
<div class="grid-item-extras"> … </div>
</div>
</div>
</div>
<div class="grid-item" data-column-index="1" data-pdpurl="http://www.LINK2.com">
<div class="grid-item"> … </div>
<div class="content">
<div class="grid-item-details-wrapper">
<div class="grid-item-image"> … </div>
<div class="grid-item-info-wrapper no-chipper">
<a href="http://www.LINK2.com">
<div class="product-name">
<p class="griditem-display-name nsg-font-size--regular nsg-text--dark-grey">
PRODUCT2
</p>
<p class="griditem-subtitle nsg-font-size--regular nsg-text--medium-grey"> … </p>
</div>
<div class="product-price-wrapper"> … </div>
</a>
</div>
<div class="grid-item-extras"> … </div>
</div>
</div>
</div>
<div class="paging-bar hidden"> … </div>
<div class="spacer"></div>
</div>
Sorry for being so verbose. The web page has an 'item-wall' with several items, 2 are only shown here. I wish to be able to set a variable as a string in the script and be able to use something along the lines of .contain() to find an instance of the matching product name in the wall and then have it open the link corresponding to the selection.
Thanks for any input!
/////////////////////////////////////////////////////////////////////////////////////////////
EDIT: Thanks to #Barmar for the working console function:
function product_click(product) {
$(".griditem-display-name:contains("+product+")").closest("a").click();
}
product_click("Desirable here")
Now I am at a loss as to how to make this function operational in an script. I've tried with scriptish in firefox and have tried writing this to a .js file and loading it as an unpacked extension in chrome to no avail. It seems as though the function/script won't load. If anyone has any thoughts, they'd be greatly appreciated.
Thanks again!
If I understand you correctly, I think this is it:
function product_click(product) {
$(".griditem-display-name:contains("+product+")").closest("a").click();
}