Good evening, i'm trying to use jScrollPane in a Wordpress template and i'm going crazy, always shows a "non-skinned" scrollbar...
This code is loaded in the header.php, .portfolio-post-content contains only text:
<script type="text/javascript" charset="utf-8">
$(function() {
$('.portfolio-post-content').jScrollPane();
});
</script>
The element in style.css:
.portfolio-post-content { width:130px; float:left; overflow: auto; height: 500px; }
The HTML out:
<!-- Main Page Content Begin -->
<div id="main">
<div id="page-content" class="portfolio-container main-container-single-portfolio" style="position:relative;">
<div class="container sidebar-left single-project">
<!-- Media Begin -->
<div class="portfolio-post-media twelve columns"></div>
<!-- Media End -->
<!-- Content Begin -->
<div class="portfolio-post-content four columns">text...</div>
<!-- Content End -->
The header file loads jScrollPane.css before the other .js files.
It sounds like a problem related to the nested div elements.
Thanks,
1:
<script type="text/javascript" charset="utf-8">
var $ = jQuery.noConflict();
$(function() {
$('.portfolio-post-content.four.columns').jScrollPane();
});
</script>
2: http://www.radiospeck.it/barchitects/wp-content/themes/spacing/js/jquery.mousewhell.js?ver=3.4.2
Not loaded
3:
.portfolio-post-content.four.columns {
height: 200px;
}
you can test with:
jQuery('.portfolio-post-content.four.columns').css({
height: '200px'
}).jScrollPane();
Related
I have an image (with myContent id) on my HTML page, for which I put display: None in my css.
my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<!-- header start -->
<div class="container-fluid">
<div class="jumbotron">
<h1>Header area</h1>
</div>
</div>
<!-- header end -->
<!-- Your page contant start -->
<div class="container-fluid">
<div class="alert alert-primary" style="height: 800px;">
<h1>Your page contant area</h1>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="myContent">
</div>
</div>
<!-- Your page contant end -->
<style>
#myContent{
display: none;
}
</style>
</body>
</html>
When any visitor scrolls down(approximately equal header height) and the header/ jumbotron section goes up(for scrolling), then I want to make the image re-visible by applying display: flex;
Please suggest how can I implement this?
best chance would be javascript, create an eventlisener on scroll, check users current scroll.y position and when higher then x add class else remove class, a class that add display:flex;
could look something like this
let img = document.querySelector('#myContent')
document.addEventListener('scroll', function(e) {
if(window.scrollY > heightofyourelement){
img.classList.add('show')
}else{
img.classList.remove('show')
}
})
I'm using Slick Slider with content in each slide (text and images):
<div id="misresenas">
<div class="resena">
<!-- my content -->
</div>
<div class="resena">
<!-- my content -->
</div>
<div class="resena">
<!-- my content -->
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#misresenas").slick({
arrows:false,
autoplay:true
});
});
</script>
The problem is when I load page, at the beginning Slick Slider looks like this with one slide above the other until it finishes load page and then it starts working:
I tried to put these lines on CSS but It doesn't work, the slider is completely hidden:
#misresenas{display:none;}
#misresenas .slick-initialized{display:block;}
How can I fix it?
Here you go. Replace $(document).ready() with $(window).load() function.
<script type="text/javascript">
$(window).on('load', function() {
$("#misresenas").slick({
arrows:false,
autoplay:true
});
});
</script>
That's the correct code
#misresenas{display:none;}
#misresenas.slick-initialized{display:block;}
What I would like to do is get the contents of each bootstrap tab and print them in different divs. Basically, I would like to trigger the el.tab('show') function for each [data-toggle='tab'], grab the shown contents, and print them in different divs on the same page.
$(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
.new
{
width: 30%;
margin: 1%;
border: 1px solid black;
display: inline-block;
min-height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li>Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">This is Home</div>
<div class="tab-pane" id="profile">This is Profile</div>
<div class="tab-pane" id="messages">This is Messages</div>
<div class="tab-pane" id="settings">This is Settings</div>
</div>
<div id="newHome" class='new'>
Want to print home content here
</div>
<div id="newProfile" class='new'>
Want to print profile content here
</div>
<div id="newMessages" class='new'>
Want to print messages content here
</div>
<div id="Settings" class='new'>
Want to print settings content here
</div>
</body>
</html>
Example: http://jsbin.com/zixihexepu/edit?html,css,js,output
Remove <script src="https://code.jquery.com/jquery-3.1.0.js"></script> from your html head as jQuery is already defined, defining multiple times will cause problem.
Then try this:
$(function() {
//This event fires on tab show after a tab has been shown.
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
//get the content href
var contentId = $(e.target).attr('href');
//from content href prepare new div id and show content html there
$("#new" + contentId.substring(1).capitalizeFirstLetter()).html($("" + contentId).html());
})
});
String.prototype.capitalizeFirstLetter = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
}
check this fiddle
bootstrap tab event Reference
I have two issues:
Having a problem with Jquery's animate() not working smoothly on Chrome, Safari and Opera. The Jquery animate()function works fine in Firefox but does not run smoothly using the other browsers(Just pops up as opposed to raising smoothly)
When I click the button to activate the div it moves up but when I click to return the div to its normal state to slide back down, it does not work.
Any suggestions with rewriting my code/logic? Thank You!
Html:
<link rel="stylesheet" type="text/css" href="icons-portfolio/foundation-icons/foundation-icons.css">
<!-- CSS for resets -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- CSS for other styles -->
<link rel="stylesheet" type="text/css" href="css/components.css">
<!--*****Need JS Libraries in head ************ -->
<!--<script src="js/modernizr.custom.38675.js"></script>-->
<script src="js/modernizr.custom.79941.js"></script>
<!--
This script enables structural HTML5 elements in old IE.
http://code.google.com/p/html5shim/ -->
<!--[if lt IE 9]>
<script src = "//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Part 1: Wrap all page content here -->
<div class="wrap">
<header>
<div>
<h1 class="mainHeadNav">CSS3 Effects 'N Stuff</h1>
</div>
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub">
</header>
<!-- grid -->
<main class="grid_main">
<section class="userBox">
<div>
<figure class="user_photo_container">
<figcaption class="user_name">
<span>Menu</span>
</figcaption>
</figure>
<ul class="user_inner" id="main-dash">
<li>Back to Portfolio<i class="fi-photo"></i></li>
<li>Facebook<i class="fi-social-facebook"></i></li>
<li>Twitter<i class="fi-social-twitter"></i></li>
<li>Instagram<i class="fi-social-instagram"></i></li>
<li><a id="dashClick" href="#">Dashboard<i class="fi-page"></i></a></li>
</ul>
</div>
</section>
<section class="boxFeatures box1">
<div class="inspire">
<h2>Transition</h2>
</div>
</section>
<section class="boxFeatures box2">
<div class="inspire">
<h2>Hover & Scale</h2>
</div>
</section>
<section class="boxFeatures box3">
<div class="inspire">
<h2>Sideways Flip</h2>
</div>
</section>
<section class="boxFeatures box4">
<div class="inspire">
<h2>3D</h2>
</div>
</section>
<!-- Dashboard start -->
<div id="Dashboard">
<h2 class="dashTitle">Project Information</h2>
<div class="dashInnerAdd">
<p>
Welcome to my project CSS3 Effects N' Stuff! I started this project to develop different cool effects using the new CSS3 Properties. Feel free to fork over the repository and contribute! If you like the project and want to chat email me: amechiegbe#gmail.com
</p>
</div>
</div>
</main> <!-- end grid main-->
</div> <!--end wrap -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/application.js"></script>
Javascript:
$(function() {
//Modernizer Test
Modernizr.addTest("keyframe", Modernizr.testAllProps('animationName'));
Modernizr.prefixed('requestAnimationFrame', window, true);
// global functions
var dash = $('#Dashboard');
var dashBtn = $('#dashClick');
var clicked = false;
dashBtn.on('click',function (e) {
e.preventDefault();
if(clicked === true || clicked === false) {
dash.animate({"top":0}, 400, function () {
console.log('Up');
});
} else {
clicked = true;
dash.animate({"top":600}, 400, function () {
console.log('Down');
});
}
});
//make it height of document
dash.document.height();
});
Without your code it is hard to see which effect you are using or how you are easing it. You can use the properties of .animate to change the way it runs smoothly.
https://api.jquery.com/animate/
.animate( properties [, duration ] [, easing ] [, complete ] )
The default easing is Swing.
I would say to try linear... to me that is more "smooth".
http://api.jqueryui.com/easings/
I'm tying to implement Twitter-Bootstrap Scrollspy on a menu so that when the user scrolls to a section of the page the css class is changed. This proven to be beyond frustrating. I'm already using the affix code from the code which works great.
So from my code below when a user scrolls to the LI element of #ScrollSpyContent I want to change the class of .product_submenu_image to .product_submenu_active.
How can I do this?
(I'm using jsp's in java so their might be some java code in here. I tried to strip out most of it.)
Thanks.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/bootstrap.css"/>
<link rel="stylesheet" href="/css/bootstrap-responsive.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>
<header></header>
<div class="row-fluid product_submenu">
<nav class="span10 offset1">
<ul class="productmenus">
<li><div class="product_submenu_image"><img src="../img/product_computer.png" alt=""/> Product Features</div></li>
<li><div class="product_submenu_image product_submenu_border"><img src="../img/product_people.png" alt=""/> Getting Started</div></li>
<li><div class="product_submenu_image product_submenu_border"><img src="../img/product_phone.png" alt=""/> Product Support</div></li>
</ul>
</nav>
</div>
<div class="container-fluid">
<nav class="row-fluid" >
<ul class="span10 offset1" data-spy="scroll">
<li class="row-fluid" id="product_features"></li> <!-- End Product Features -->
<li class="row-fluid" id="gettingstarted"></li> <!-- End Getting Started -->
<li class="row-fluid" id="product_support"></li><!-- End Product support -->
</ul>
</nav>
</div>
<footer></footer>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/js/bootstrap.js"></script>
<script>
$(function() {
var $spy = $('.productmenus');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
//e.target is the current <li> element
var header = $(e.target).find(".product_submenu_image");
$(header).addClass('active');
});
});
</script>
</body>
</html>
CSS:
.product_submenu_image
{
background: url('../img/product_tab_default.gif');
max-height: 100%;
padding: 18% 0 18% 0;
border: none;
}
.product_submenu_image.active
{
background: blue;
/*background: url('../img/product_tab_selected.gif');*/
}
So you need to use the scroll spy activate event described here:
http://twitter.github.com/bootstrap/javascript.html#scrollspy
Basically you need some code like so:
$(function() {
var $spy = $('.nav.nav-pills');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
// do stuff here when a new section is in view
});
});
Here is a working example:
http://jsfiddle.net/hajpoj/f2z6u/3/
please ignore the fact that it starts at the bottom... not sure if that a unrelated or related bug, but the main point is you can see how the activate event works