I copied the code from dev7 studio's example of how to insert two nivo sliders on one web page, but I am unsure how to tweak the individual settings of each slider, such as how to get the first slider to just use arrows, while the second slider only uses bullets. Also how would I adjust the height & width of each slider in terms of location of arrows & bullets.
Here is the style.css:
/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/
/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
body {
line-height:1;
color:black;
background:white;
}
table {
border-collapse:separate;
border-spacing:0;
}
caption, th, td {
text-align:left;
font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}
/*===================*/
/*=== Main Styles ===*/
/*===================*/
body {
font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
color:#333;
background:#eee;
}
a, a:visited {
color:blue;
text-decoration:none;
}
a:hover, a:active {
color:#000;
text-decoration:none;
}
#dev7link {
position:absolute;
top:0;
left:50px;
background:url(images/dev7logo.png) no-repeat;
width:60px;
height:67px;
border:0;
display:block;
text-indent:-9999px;
}
.default #slider {
margin:100px auto 0 auto;
width:960px; /* Make sure your images are the same size */
height:310px; /* Make sure your images are the same size */
}
.default #slider2 {
margin:100px auto 0 auto;
width:280px; /* Make sure your images are the same size */
height:65px; /* Make sure your images are the same size */
}
slider-wrapper,
lider-wrapper {
margin-top:150px;
}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
clear:both;
}
Here is the default.css:
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: flexible
Description: The default skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
*/
.default .nivoSlider {
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
margin-bottom:50px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.default .nivoSlider a {
border:0;
display:block;
}
.default .nivo-controlNav {
position:absolute;
left:70px;
bottom:25px;
margin-left:-40px; /* Tweak this to center bullets */
z-index:300;
}
.default .nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:1px;
float:left;
}
.default .nivo-controlNav a.active {
background-position:0 -22px;
}
.default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
.default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.default a.nivo-prevNav {
left:15px;
}
.default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.default .nivo-caption a:hover {
color:#fff;
}
To use more than one slider on your webpage, you will firstly want to change the #ID elements to .CLASSES, both in the HTML and in the CSS, as we're creating more than one slider now...
If you are looking at changing each one of your slider's appearances, this would relate to your HTML inline-styling and how the skin (default, light, dark etc.) is being output. Simply change this to the desired skin in your demo.html file. It should look something like this:
div class="slider-wrapper theme-default"
Now replace "theme-default" with for example, theme-light.
To modify the bullets in the default skin slider, you're wanting to play with:
.default .nivo-controlNav` and .default .nivo-controlNav a {
To modify the arrows in the default skin slider, you're wanting to play with:
.default .nivo-directionNav a {
ID of each slider should be different and then initialization and settings can be written individually for each one.
<div id="slider" class="nivoSlider">
<img src="slide1.jpg" alt="" />
<img src="slide2.jpg" alt="" />
<img src="slide3.jpg" alt="" />
<img src="slide4.jpg" alt="" />
</div>
<script type="text/javascript">
$('#slider').nivoSlider({
effect: 'slideInLeft', // Specify sets like: 'fold,fade,sliceDown'
slices: 1, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
</script>
The ID part in each jQuery function should be different following the two different IDs you used to identify each slider in the HTML.
$('#slider').nivoSlider({
Meaning you will have two copies of this code, one per each slider.
Different CSS styles per slider can be attained via these IDs referenced in a CSS file.
Note the .nivoSlider class of the slider container is common in both instances, since it's connected to general styles needed for the slider to work.
Related
I have this code to slide to left 10px my h2: It works but after the text is moved It returns to 0 padding left. How I can stop the animation?
Thanks.
.bg_slider:hover h2 {
animation: myanim-in 3s 1;
}
#keyframes myanim-in {
50% {
padding-left: 10px;
}
You can use transition effects instead of animation.
I add a testable example below.
.bg_slider h2 {
transition: 1s;
}
.bg_slider:hover h2 {
padding-left: 10px;
}
<div class="bg_slider">
<h2>Heading</h2>
</div>
I'm new to Vue.js and I have a (block) element that should be initially hidden on page load. I'm coming from a pure JS mixed with JQuery background so normally I would initially set display:none on the element use JQuery's show/hide methods etc.
I have the showing and hiding working correctly with Vue but a side effect is that the element flashes on the screen briefly on page load until the Vue setup is complete and it knows to hide the element. Setting display:none breaks the show/hide presumably because the elements class prop has higher precedence. Setting opacity:0 also seems to be overriding anything Vue is doing so that breaks the show/hide too. !important on the Vue animation classes does not help either.
The embedded sandbox below might not be the best way to reproduce this, and I suppose it might be system dependent too (speed, memory etc.) but surely this must be a common enough situation with some solution that I've missed.
VUE = new Vue({
el: '#app',
data: {
showFullpageSpinner: false
}
});
setTimeout(function() {
VUE.showFullpageSpinner = true;
setTimeout(function() { VUE.showFullpageSpinner = false; }, 1500);
}, 1500);
.fullpage-spinner-underlay {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,0.65);
z-index: 9999;
}
.fullpageSpinner-enter-active, .fullpageSpinner-leave-active {
transition: opacity .25s;
}
.fullpageSpinner-enter, .fullpageSpinner-leave-to {
opacity: 0;
}
.css-spinner {
position: absolute;
display: inline-block;
}
.css-spinner:before {
content: 'Loading...';
position: absolute;
}
.css-spinner:not(:required):before {
content: '';
border-radius: 50%;
border-top: 3px solid #daac35;
border-right: 3px solid transparent;
animation: spinner .7s linear infinite;
-webkit-animation: spinner .7s linear infinite;
}
#keyframes spinner {
to {-ms-transform: rotate(360deg);}
to {transform: rotate(360deg);}
}
#-webkit-keyframes spinner {
to {-webkit-transform: rotate(360deg);}
to {transform: rotate(360deg);}
}
#-moz-keyframes spinner {
to {-moz-transform: rotate(360deg);}
to {transform: rotate(360deg);}
}
.fullpage-loading-spinner {
left: 50%;
top: 45%;
margin-left: -40px;
margin-top: -55px;
}
.fullpage-loading-spinner:BEFORE {
width: 55px;
height: 55px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<transition name="fullpageSpinner">
<div v-if="showFullpageSpinner" class="fullpage-spinner-underlay">
<div class="css-spinner fullpage-loading-spinner"></div>
</div>
</transition>
</div>
Your problem seems to be solvable with the v-cloak directive.
This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.
Example:
[v-cloak] {
display: none;
}
<div v-if="showFullpageSpinner" class="fullpage-spinner-underlay" v-cloak>
<div class="css-spinner fullpage-loading-spinner"></div>
</div>
I am customizing shopify motion theme. I added a scroll down svg on bottom of the slider. But having problem with scrolling down to the next section
I have added the scroll down button with that code;
div.hero__image-wrapper:after {
content: url({{ "icon-scroll-down.svg" | asset_url }}) ;
position: absolute;
display: block;
z-index: 34560;
bottom: 20px;
left: 48%;
font-size: 2em;
border-radius: 1em;
font-weight: bold;
border: 3px solid gray;
padding: 0.1em 0.1em 0;
animation-name: color_change;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes color_change {
0% { color: gray; bottom:20px;}
10% { color: black; bottom:10px;}
20% { color: gray; bottom:20px;}
100%{ color: gray; bottom:20px;}
}
But currently it's only an icon. I need to make it scroll to down
I would do it with JS instead. Let's assume your button is an actual element instead of pseudo ::after:
<div class="scroll-down-button"></div>
.scroll-down-button {
// whatever style you prefer
}
Then the JS code would look like this:
(function() {
// Get the button element
var button = document.querySelector('.scroll-down-button');
// Get current section
var currentSection = button.closest('.shopify-section');
// Get next section (the very next element after current section container)
var nextSection = currentSection.nextSibling();
// Get the coordinates of the next section
var nextSectionCoordinates = nextSection.getBoundingClientRect();
// Get the top Y axis coordinates of next section
var nextSectionTop = nextSectionCoordinates.top;
// Scroll to the top of next section (0 means no scroll on X axis)
window.scrollTo(0, nextSectionTop);
})();
The above is not tested, so let me know if it doesn't work or you can console.log any values. You should get the idea though!
Please open https://jsfiddle.net/gfmyt9u8/31/
When user clicks outside <section> tag area, then the opened div overlay panel should be closed.
Steps to produce scenario :
Click "Please Select Options"
Now, click first item from opened overlay panel (by doing this, the panel got closed automatically)
Next, Click inside the blue color border div (This shows "Please Select Options" as label) again
Now, try to click outside the "blue color border div" and "opened div overlay panel beneath" both
overlay panel will not close
Actual Result : overlay panel is not closing
Expected Result : overlay panel should close when clicked outside the "blue color border div" and "open overlay panel
beneath"
Use the mounted lifecycle hook to add a click event listener to check if the click event is outside the element or not, and based on that hide the element.
A working example:
new Vue({
el: '#app',
data: {
displayList: false,
cat: ['A', 'B']
},
methods: {
itemSelect(o) {
this.displayList = false;
}
},
mounted: function () {
// Listen to all clicks on the document
document.addEventListener("click", function(event) {
// If the click inside the element, do nothing
if (event.target.closest(".section-main")) return;
// If the clicks outside the element, hide it!
this.displayList = false;
}.bind(this));
}
});
.display-no-selected {
cursor: text;
width: 300px;
height: 25px;
border: solid 2px blue;
}
.display-list {
border: solid 1px wheat;
width: 300px;
max-height: 150px;
overflow-y: auto;
}
.toggle-list {
display: none;
}
ul, .selected-ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.inner-ul li {
cursor: pointer;
font-weight: normal;
}
ul.inner-ul li:hover {
background-color: wheat;
}
.default-highlight {
background-color: wheat;
}
ul.inner-ul li span {
margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<section class="section-main">
<div class="display-no-selected" #click="displayList=true"> Please Select Options
</div>
<div class="display-list"
v-bind:class="{'toggle-list': !displayList}">
<ul class="inner-first-ul inner-ul">
<li v-for="o in cat" #click="itemSelect(o)">
<span>{{o}}</span>
</li>
</ul>
</div>
</section>
</div>
Well, this is exactly what I need to do :
When the user right-clicks on a WebView, the typical menu (without "reload",etc) should not show up.
How can this be done? Any ideas?
P.S. Also : is it possible that a custom menu is shown?
It is simple to prevent the context menu with html:
<body oncontextmenu="return false;">
or with javascript (jquery):
$(document).bind(“contextmenu”, function (e) {
e.preventDefault();
});
Or, if you want to show a custom html context menu using javascript...
HTML:
<div id="context-menu">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
<div id="op">Right click anywhere!</div>
CSS:
#context-menu {
display: none;
position: fixed;
border: 1px solid #ddd;
background: white;
box-shadow: 2px 2px 1px grey;
}
#context-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#context-menu li {
width:150px;
padding: 5px 8px;
}
#context-menu li:hover {
background:#eaeaea;
cursor:pointer;
}
JS:
function startFocusOut() {
$(document).on("click", function () {
$("#context-menu").fadeOut(20); // To hide the context menu
$(document).off("click");
});
}
$(function(){
$(document).bind("contextmenu", function (e) {
e.preventDefault(); // To prevent the default context menu.
$("#context-menu").css("left", e.pageX); // position with cursor
$("#context-menu").css("top", e.pageY);
$("#context-menu").fadeIn(20, startFocusOut()); // show the menu
});
$("#context-menu li").click(function () {
$("#op").text("You have selected " + $(this).text()); // Performing the selected function.
});
});
Jsfiddle: http://jsfiddle.net/VRy93/