I can't get it to work. I've added it via CDN and a code snippet for smooth scrolling in app.js straight from an example from the author to be sure I got it right. Clicking on my link takes me nowhere.
<li class="active">Contact</li>
...html
<footer class="footer" id="footer">
...html
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.ui.min.js"></script>
//app.js
$("#footer").velocity("scroll", {
duration: 800,
delay: 500
});
Related
i have problem with scroll. Its working fine, but i want to make it instantly without any animation, just then page refreshing be the same place as before without scrolling to the place.
my js code.
<script type = "text/javascript">
$(function() {
$(window).scrollTop( $("#col-6").offset().top)
});
</script>
My project structure for example.
First including css and html
<?php
include(html/css.php);
some code....
<div class=col-6>
some code....
</div>
include(footer.php);
?>
so in footer php after
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/5fbb5e690d.js" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
i use my js code.
And after page load its scrolling to col-6 div. But, i want instantly without any animation or scrolling be in what place.
What i try
<script>
$(window).on('beforeunload', function() {
$('body').hide();
$(window).( $("#col-6").offset().top)
});
</script>
any1 have solution for it ?
Since you use jQuery, your can use .animate() with an animation delay of zero milliseconds (instantaneous).
That is .animate([property], [delay], [callback]).
To make sure to hide the very quick scroll effect, you can hide the whole page (using the CSS opacity at zero), then after the scroll has completed, restore the opacity.
Documentation
$(document).ready(function() {
// hide the whole page
$("html").css({opacity:0})
// scroll and unhide the page using the complete callback
$("html").animate({
scrollTop: $("#scroll_to_me").offset().top
}, 0, ()=>$("html").css({opacity:1}))
})
.space {
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="space"></div>
<div id="scroll_to_me">HERE</div>
<div class="space"></div>
As the title says, I am implementing the Masonry in certain part of my wordpress website.
You may check it out here and find the image below:
In the image above, that's the place I'm trying to implement the masonry.
The codes for masonry in here:
Fiddle
$(window).load(function(){
$('.tentofifteen').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 1,
});
});
.grid-item {
float: left;
}
.grid-superloop-ten {width:319px; min-height:700px;background:#CCC;}
.grid-superloop-eleven {width:220px; min-height:350px; background:#009;}
.grid-superloop-twelve {width:437px; min-height:350px; background:#F36;}
.grid-superloop-thirteen {width:337px; min-height:350px; background:#CC9;}
.grid-superloop-fourteen {width:319px; min-height:350px; background:#0F0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<div class="tentofifteen">
<section class="grid-superloop-ten grid-item" id="wired-superloop">
</section>
<section class="grid-superloop-eleven grid-item" id="wired-superloop">
</section>
<section class="grid-superloop-twelve grid-item" id="wired-superloop">
</section>
<section class="grid-superloop-thirteen grid-item" id="wired-superloop">
</section>
<section class="grid-superloop-fourteen grid-item" id="wired-superloop">
</section>
</div>
It works right?
The problem is, when I start COPYING the same exact codes from jsfiddle to dreamweaver, nothing is happening. What's wrong? Am I missing something?
In your posted code you are loading masonry twice.
On your site, you are loading masonry before jQuery but calling it with a jQuery function so you need to load your scripts like this instead of the way they are currently.
<script src="https://code.jquery.com/jquery-2.1.3.js" type="text/javascript" language="javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js" type="text/javascript"></script>
BTW, you site is loading 2 versions of jQuery, 1.11.3 and 2.1.3. You need to load just one.
I'm trying to do a scroll to the top animation with my blog, http://goneintranslation.blogspot.ca with the home link and at the bottom. I think I have the proper coding here JSFiddle
I've read online you but the jQuery code before the < /head> tag in your HTML code
so this is what I did, I inserted the jQuery code within script tags and pasted this code before the < /head> tag in my HTML. After saving my code, the scroll to the top animation does not work. What am I doing wrong? I've read online you have to reference your script tags or something? If that's my mistake how do I reference my script tags or what is the reference to my script tags?
Many Thanks
<script>
$('.home-link').on('click', function(){
$("body").animate({ scrollTop: 0 }, 1000);
});
</script>
I saw your html code in jsfiddle:
<div class='mobile-link-button' id='blog-pager-home-link'> <div class="test">
TOP
</div>
<a class='home-link' expr:href='data:blog.homepageUrl' value="go to top">Go to top</a>
</div>
Please change the link to:
<a class='home-link' href='#'>Go to top</a>
Try wrapping it in the ready function and make sure jquery is included,
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.home-link').on('click', function(){
$("body").animate({ scrollTop: 0 }, 1000);
});
});
</script>
You don't need to include the code above in the <head></head> you can add it at the bottom of the page before the </body> tag, what you read about adding jquery to the head was about the link to the jquery library your going to use.
see below for a basic page setup
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<!-- and the rest of your resource links -->
</head>
<body>
<header>
<!-- your header html in here -->
</header>
<content>
<!--
where all your main content is
with the images and text that is
displayed on your page
-->
<!-- under all your main content at the bottom add your button/link to scroll back to the top -->
Scroll To Top
</content>
<footer>
<!-- your footer html in here -->
</footer>
<!-- now add your javascript/jquery functions -->
<script>
$('.home-link').on('click', function(){
$("body").animate({ scrollTop: 0 }, 1000);
});
</script>
</body>
</html>
There are lots of resources around to read up on and learn all this such as w3schools as well asand free online sites to learn code like codeacademy
hope this helps.
I'm trying to install SoundManager's 360Ui player.
But i cant seem to nail it.
This is the jQuery code in my header:
<script type="text/javascript" src="wp-content/themes/medium/includes/js/soundmanager2-nodebug.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/excanvas.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/berniecode-animator.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/360player.js" charset="utf-8"></script>
...
<script type="text/javascript">
//some soundmanager settings
soundManager.url = 'wp-content/themes/medium/swf/';
soundManager.flashVersion = 9;
soundManager.useHTML5Audio = true;
soundManager.debugMode = false;
</script>
And the HTML call:
<div class="ui360">
<!-- dynamically-inserted block -->
<div class="ui">
<canvas class="sm2-canvas"></canvas>
<span class="sm2-360btn"></span>
<div class="sm2-timing"></div>
<div class="sm2-cover"></div>
</div>
<!-- /UI -->
<a href="http://**.**.**.**:8000/live">
</div>
For some reason the small play button appears and a second later disappears.
I'm looking to place the big player demo but i cant seem to
properly initiate that player.
All js files and css files from Demo folder are registered.
My Website
Its supposed to appear on the left panel.
if you examine the firebug console you will see that a GET request to http://tranceil.fm/new/readerPlayer.php return a 301 redirect, that might be causing the issue
I know this was asked a couple of years ago, but I was stuck on the same thing and here is how I solved it.
There is a second CSS file called 360player-visualization.css that you need to include.
<link href="360-player/360player.css" rel="stylesheet">
<link href="360-player/360player-visualization.css" rel="stylesheet">
Then in the HTML, include ui360-vis class name as well.
<div class="ui360 ui360-vis">
</div>
Just as you had it, you should also have a custom CSS to increase the size of the player:
.ui360,
.sm2-360ui {
width:250px;
height:250px;
}
And as you had it, the three required JS files:
<script src="360-player/script/berniecode-animator.js"></script>
<script src="soundmanager2-nodebug-jsmin.js"></script>
<script src="360-player/script/360player.js"></script>
This is quite odd, and I can't get it to stop happening.
Here's the relevant code. I'm using a Google CDN host for the UI-lightness theme.
<div id="prof_div">
<ul>
<li>Profile</li><br/>
<li>Details</li><br/>
<li>Settings</li><br/>
</ul>
That's the only relevant HTML. Here's jQuery/JavaScript
$(document).ready(function() {
$('#prof_div').tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
});
And it's displaying like this:
TAB 1
TAB 2
TAB 3
Instead of like this:
TAB 1 - TAB 2 - TAB 3
I have no custom CSS acting on them at all (I even blanked my stylesheets to check).
Any idea why this is happening? I'll post a screenshot if necessary.
Thanks! :)
EDIT
Here's my CDN requests
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="https://www.google.com/jsapi?key=very long string"></script>
<script type="text/javascript" src="/JSFunctions.js"></script>
<script type="text/javascript">
google.load("jquery", "1.6.4");
google.load("jqueryui", "1.8.16");
....
</script>
Remove those ending <br/>s from your <li>s. They shouldn't be there.
<div id="prof_div">
<ul>
<li>Profile</li><br/>
<li>Details</li><br/>
<li>Settings</li><br/>
</ul>
Here's a fiddle.