I have a site:
URL: http://362.a07.myftpupload.com/
Password: aynhoe_park
I'm trying to make the scroll force to go from section to section instead of a normal page scroll.. I have tried setting in the fullpage.js (http://alvarotrigo.com/fullPage/) and I can't seem to get it to recognise it.
Can anyone have a look and help me get this working? As I can't seem to see why I can't get the page to scroll from one section to another like the fullpage.js site.
The problem lies with a misplaced ,.
This is your code currently
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
anchors: ['home','aboutus','ourblog','yourhost','thecollection','thehouse','exclusivehire',]
menu: '.nav',
scrollOverflow: true,
});
});
</script>
The anchors has an extra , in the [] but there isn't one after to say there are more elements coming.
Try this:
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
anchors: ['home','aboutus','ourblog','yourhost','thecollection','thehouse','exclusivehire'],
menu: '.nav',
scrollOverflow: true,
});
});
</script>
jQuery Problem
Try this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#fullpage').fullpage();
jQuery.fn.fullpage({
anchors: ['home','aboutus','ourblog','yourhost','thecollection','thehouse','exclusivehire'],
menu: '.nav',
scrollOverflow: true,
});
});
</script>
Ok found the solution. The code I was using was wrong. It ended up being this jQuery library I needed to use : https://github.com/guins/jQuery.scrollSections
Which was
<script>
jQuery(function() {
jQuery('section.section').scrollSections();
});
</script>
With the accompanying js files.
Thanks for all your help :)
Related
I am running a Wordpress on twenty fifteen child theme. I found a Script to toggle menu on mouseover. I really like that feature.
But I want to add following option:
When the user is on childpage of parent1, I want the menu to be open on this point, as it is by default in twentyfifteen. You can see it here:
http://johannabaschke.de/impressum/
I now want that also with the script I found:
<script>
var $ =jQuery.noConflict();
$(document).ready(function () {
$('.sub-menu').hide();
$('.menu-item-has-children').hover(function() {
$(this).children('.sub-menu').stop().slideToggle(200);
});
});
</script>
It toggles menu on mousover, but when clicking child-page, the menu isnt open, like here:
http://johannabaschke.de/transeuropa-2015/
I am not good in coding, thats why I only modify WP-themes with CSS which I am good at, but Javascript is not my bet practice. Maybe someone has a simple idea to solve this?
Would be super glad and thx for your help!
54v4nn4h
Please try like this:
<script>
var $ =jQuery.noConflict();
$(document).ready(function () {
$('.sub-menu').hide();
$('.menu-item-has-children').click(function() {
$(this).children('.sub-menu').stop().slideToggle(200);
});
});
</script>
Could you please try following code:
<script>
var $ =jQuery.noConflict();
$(document).ready(function () {
$('.sub-menu').hide();
$('.menu-item-has-children').hover(function() {
$(this).children('.sub-menu').stop().slideToggle(200);
});
//code to keep open respective menu open on page load
$("a[href='"+window.location.href+"']").closest('.sub-menu').stop().slideToggle(200);
});
</script>
Here you can see my source code
http://xoda.paperplane.io/
I am trying to make it, so when you click on the youtube link it should open the youtube video with fancybox, as can be seen here.
http://jsfiddle.net/hR5Wk/
$(document).ready(function () {
$('.fancybox').fancybox({
helpers: {
media: {}
}
});
});
I just dont get why mine isn't working...
I see in your page, jQuery load multiple times... please remove one:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
it will fix your problem
Hi I am using this script to add social media icon into my site.
<div id="menu" class="shareSelector" style="width:250px; height:250px;"></div>
$(document).ready(function () {
$('.shareSelector').socialShare({
social: 'facebook,google,pinterest,twitter',
whenSelect: true,
selectContainer: '.shareSelector'
});
});
div gets the content upon clicking on it.Can we call this function without clicking div means on bodyload?
Regards:Ali
The $(document).ready(function () {}); function should run when the page loads.
Have you got the jquery in a <script> tag?
If so, the bindings are setup by the socialShare plugin, so you may need to look at that.
What does whenSelect option do?
$(document).ready(function () {
$('.shareSelector').socialShare({
social: 'facebook,google,pinterest,twitter',
whenSelect: true,
selectContainer: '.shareSelector'
});
$('.shareSelector').click()
});
Dont know about the socialShare plugin but you have an option there which says "whenSelect: true"
try false
I am willing to use the jQuery UI layout plugin (layout.jquery-dev.net) to make 2 resizable <div>. It would be just the center and east panels we can see here.
From the documentation I could make the simplest layout to work :
<script type ="text/javascript">
$(document).ready(function () {
var oOptions = {
applyDefaultStyles: true
};
$('body').layout(oOptions);
});
</script>
<body>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-east">East</div>
</body>
But when I try my own thing (with both panels resizable by dragging the vertical divider), it stops working entirely.
var oOptions = {
closable: false,
resizable: true,
slidable: true,
center__minWidth: 200,
east__minSize: 200
};
I have no background in JavaScript and I might just be dumb asking here. But from what I understood when reading the <script> at the demo page (same as above), it should works fine with the resizable option only.
Using jQuery 1.9.2 did the thing.
I'm using the EasyTabs plugin by Alfa Jango on my website, and would like to have the panels seperated from tabs. He states in the documentation what I want to do;
Your panels can also be somewhere else in the DOM entirely (outside of
your tab container), if you specify an alternate panelContext.
The panelContext is any jQuery DOM element, in which easytabs will
look for the panels. By default, it's the container on which
easytabs() was called.
So, I understand I have to specify panelContext, say, to look for the panels in div#disconnected.
This is what I tried, but nothing works...
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
panelContext: '#disconnected';
});
});
</script>
Or trying to change the $container...
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
$container: '#disconnected'
});
});
</script>
Any help would be greatly appreciated!
I have a same problem as you, and found the answer:
You should type as:
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
panelContext: $('div#disconnected')
});
});
Found after looking the code here: Easy Tabs Github
Hope it helps