Hi everyone just started learning Fullpage.js here and i was wondering if i can let's say divide my page into 3 sections 1 for header 1 for section and 1 for footer. Then set 4-5 sliders in the Section part. what i want is for the navbar to highlight only the current slider in that section not all 4-5 of them at once...
like so:
Then when i go to the sections it does this:
and the last section:
how do i make it only active on the current slider and not all of them?
Thank you in advance ^^
I would recommend you to make use of the fullPage.js state classes for that. Probably the easiest way.
Using the fp-viewing-x-y class added to the body should be quite easy. For example:
.fp-viewing-home-0 #menu li:nth-child(1){
background:red;
}
.fp-viewing-home-1 #menu li:nth-child(2){
background:red;
}
.fp-viewing-home-2 #menu li:nth-child(3){
background:red;
}
Reproduction online
If you prefer to use jQuery or JavaScript, you can make use of fullpage.js callbacks such as onLeave.
See another of my answers and the example online.
Related
i have to reduce size of pagination icons and fonts in order to fit into a slickgrid
attached screenshot for ref-
enter image description here
Changing the CSS style of the Pagination buttons is not going to help much, it will barely give you back couple of pixels, if you want to do that then I added a couple more SASS variables if you want to play with them
with SASS, you can lower these 2 variables (defaults are shown below, for more take a look at all the SASS variables)
$pagination-button-height: 32px; // around 28px
$pagination-button-padding: 6px 12px; // around 4px 8px
Another thing you could maybe try is to change the English translation for "items per page" and remove the word "items" (via Translations (Wiki) or Locale File (Wiki) file depending on what you use).
{
"ITEMS_PER_PAGE": "items per page" // --> "per page"
}
The last option would be to create your own Custom Pagination but that would require much more effort but someone did just that and you can see it in this Example - Custom Pagination
I am currently working on customizing the welcome page for my Bigcartel site.
I am using the Neat theme and would like to remove the grid filter that appears over the slideshow image1 to appear clean image2
I was wondering if it's possible in Big Cartel and what was the process to follow?
To remove the grid, you'll need to drop the following code into the bottom of the CSS section in your Customize Design area:
.slideshow div.featured_holder {
background: none;
}
add this in your css
.slideshow .featured_holder {
background-image:none
}
How to remove one navigation i will try but not solve it. here below screen short of this error..enter image description here
I think you are calling code two times in your header.phtml
check that and remove one.
or you can just hide one of them using css property.
just select the class using parent class and assign rule
display:none !important;
I am designing a single page website and want the fixed nav links to change colour whenever the user scrolls to the specified location. Seems pretty easy to do, I thought it was pretty easy to do, but I am having problems making it work.
I only downloaded the Scrollspy JS Plugin, as I am not using the Twitter Bootstrap CSS. I just require the Scrollspy Plugin.
Could you check this jsFiddle and provide some guidance? I have already checked out the documentation here, but I've had no luck. Any help is greatly appreciated :)
http://jsfiddle.net/xjTpk/28/
Ignoring the serious issues with your use of JSFiddle1, and the typographic errors2, the principle things wrong are
You need the .nav class on the <ul> in the navbar, and
The #welcome is not an existing element, causing a JS error.
Here's a fixed demo:
JSFiddle
Oh, and you don't need both data-api and js to initialize the plugin; choose one.
1 Loading Bootstrap 2.0.2 + 2.0.4 at the same time; trying to include a <body> in the html panel
2 Using upperCamelCase on a function that doesn't need it: scrollSpy();
Key thing you are missing is you have to have a "nav" class on the ul element (or some other parent element) as that is used in the scrollspy code as part of a selector.
I couldn't get yours to work for some reason but here is a simplified example:
http://jsfiddle.net/UWzeD/5/
Your ul needs a nav class, but most important for scrollspy to work properly is that your target needs to be one level about the ul. Otherwise I've found that scrollspy doesn't work.
I wanted to have a feature in my Jommla based application, that when ever a user brings the mouse over a particular paragraph in article the color of text should change. so that the paragraph looks more prominent on the screen.
I want this thing to be dynamic. Just wanted to know which is the best place to do that. Where in the Joomla the article parsing takes place ?. If I am lucky is there any plugin that can help achieve that ? Kindly let me know
You can make a slight modification to Trev's solution and make it work without having to change any articles.
.contentpaneopen p:hover {color:#ff0000;}
By default, Joomla assigns the contentpaneopen class to articles, this would produce the effect on all P tags that are children of that class.
By far the easiest thing to do would be to add a style to paragraph in question in your article and then add an appropriate hover rule in the css, e.g.
<p class="highlight>some text in here</p>
and
p.highlight:hover
{
color: #ff0000;
}
Just tried it here and it worked for me on the last paragraph:
http://thelunarscape.com/blog/an-increasingly-active-sun
Better solution than using a plugin in this case, unless you want to something more fancy I guess as content plugins are run every time an article is loaded no matter if it's needed or not.
Another more advanced way to achieve this is with help of MooTools.
Include MooTools with in your application with:
jimport( 'joomla.html.html.behavior' );
JHtml::_('behavior.framework'); //MooTools core
JHtml::_('behavior.framework', true); //This is for MooTools more libraries
Next create a script that changes the css of the paragraph with id "myid":
$js = <<<EOD
window.addEvent('domready', function(){
$('myid').setStyle( 'border', '1px solid #000000')
});
EOD;
$document =& JFactory::getDocument();
$document->addScriptDeclaration($js);
Why use MooTools?
MooTools makes it possible to tweak the highlightning and even animate the highlight. It should also have better support for the older browsers.