I have a very simple issue that I can't figure out whether I'm doing something wrong or if it's an issue from the library itself. I'm scratching my head for hours on this.
I'm using Swiper from iDangerous.
I'm trying to create a simple Horizontal Swiper and inside each slide, there will be another slider which will be in vertical mode and I need to have that vertical slider in freeMode. That inner vertical slider will always have one slide having lots of content (at least some, that can be scrolled). The nested scroller works but the freeMode is not working for me at all. freeMode is only working if I declare it on the outer one. I have a fiddle in place so you can see what I'm trying to do. Some sample code from the fiddle is as follows.
HTML
<div class="swiper-container outer">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-container inner">
<div class="swiper-wrapper">
<div class="swiper-slide">
lots of lorem ipsum here. see fiddle
</div>
</div>
</div>
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>
Javascript
var swiper = new Swiper('.swiper-container.outer');
var swiper1 = new Swiper('.swiper-container.inner', {
direction: 'vertical',
freeMode: true
});
Fiddle
http://jsfiddle.net/sdugx1Lu/
Any help is greatly appreciated.
Update
My original intention is not at all in favor of using nested sliders. What I actually want to accomplish is to have vertically scrollable content (via touch, I'm using it in an app) inside Horizontal slider through Swiper. So, if this can be accomplished without using the second level of nested slider, please do suggest. As when I tried to do that, the vertical scroll was not available in case of single level horizontal slider.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1>
</head>
This line make your code adjust to mobile, and also will make the width become device-width.
But your height is 100% and you can't change if you don't
so when you change your style in your css file, maybe it will be used in every section (container) if you don't add that line of code.
but you add that line of code every section will become :height is device-height,
so what you should is add special style in your css file for which you want change
such as your article is longer than device-height, you have to add special style for that section. if not, your scroll will not working.
Chinese: I want to print Chinese, but not allowed.
Related
I am using fullpage.js for my website.
I was wondering if I can add a non-sticky menu to all my sections,
I have tried just to put the menu code on all my website section, But it is make my website slowly. Someone have any ideas?
So you want for each individual section to have its own menu?
In that case this might do
html:
<div id="fullpage">
<div class="section">section 1</div>
<div class="section">
<div class="sectionMenue">This is the menue for section 2</div>
section 2
</div>
<div class="section">
<div class="sectionMenue">This is the menue for section 3</div>
section 3
</div>
<div class="section">section 4</div>
css:
.sectionMenue {
position: absolute;
top: 0px;
}
JSFiddle
fullpage will modify all of the sections once it runs, making the positions of all the sections fixed. that means that any absolute positioning inside one of these sections will position it relative to the section itself. Hope that makes sense
I tried to search for this topic with no luck.
I want to display content in my webpage in multiple rows and with each row, I want to have next and back buttons when the contents are more than the page width.
A good example is Youtube
I found good toturials about carousel, but I am not really looking for carousel or at least it doesn't look like what I am looking to implement.
I hope that I was able to explain my question
I did something quite similarly in the past, I will try explain how I did it.
Firstly, here is the js fiddle:
https://jsfiddle.net/VoidZA/fxudjony/
It is something around the lines of:
<div class="container-holder">
<div class="click-prev nav-button">Prev</div>
<div class="outsideViewBefore container">Container Before</div>
<div class="inView1 container">Container 1</div>
<div class="inView2 container">Container 2</div>
<div class="inView3 container">Container 3</div>
<div class="inView4 container">Container 4</div>
<div class="inView5 container">Container 5</div>
<div class="outsideViewAfter container">Container After</div>
<div class="click-next nav-button">Next</div>
</div>
edit final:
Fixed up the code, and put an example into jsFiddle
I am trying to create a slideshow with an onload event through a separate JS file. I've tried looking for possible solutions online and all of them require the coding to be all in one file. What would be the best way to approach this issue?
I have attached my HTML coding for the JS reference.
<div class="slideshow-container">
<div id="slideshow">
<div class="numbertext">1 / 5</div>
<img src="images/LakeYellowstoneSunset.jpg" height="408px" width="616px"/>
<div class="text">Yellowstone National Park<div>
<div class="numbertext">2 / 5</div>
<img src="images/SanMural.jpg" width="408px" height="616px"/>
<div class="text">San Francisco, CA</div>
<div class="numbertext">3 / 5</div>
<img src="images/SanJelly.jpg" height="408px" width="616px"/>
<div class="text">San Francisco Aquarium</div>
<div class="numbertext">4 / 5</div>
<img src="images/AKGold.jpg" height="408px" width="616px"/>
<div class="text">Alaska Yukon</div>
<div class="numbertext">5 / 5</div>
<img src="images/SaltLake.jpg" height="408px" width="616px"/>
<div class="text">Salt Lake City, UT</div>
</div>
</div>
I'm not exactly sure what you are asking since you didn't give us the JS code you are working with. I am assuming you only want 1 image displayed and we should start cycling through the images after the web pages loads.
I updated your HTML slightly and added JS code to do this in the below codepen/
http://codepen.io/anon/pen/WopMzb
I updated your "slide" html to the be wrapped in a div so we can easily hide/show the "slide"
<div class="slide active">
<div class="numbertext">1 / 5</div>
<img src="images/LakeYellowstoneSunset.jpg" height="408px" width="616px"/>
<div class="text">Yellowstone National Park<div>
</div>
This will only show 1 "Slide" at a time and will change the slide every 3 seconds.
For future questions it may be best to create a codepen or something similar with the CSS/JS/HTML that you are having trouble with. You are more likely to receive a response if it is easier for someone to debug.
"All of them require the coding to be all in one file". That's false. There is no difference, how you include, for example, Javascript code for your HTML:
Creating separate js file and include it via script tags like this (in your HTML):
<script src="yourFile.js"></script>
Or you include all the Javascript logic in your HTML like this:
<script>
// Your Javascript logic here
</script>
Your html structure reminds me of bootstrap's carousel option. If you don't mind adding bootstrap to your project it might be worth a look:
Bootstrap carousel
Added bonus is that you don't have to write anything custom for your slideshow control.
Below I have a small js based simulator for different command tools. The user enters a command, and if it's correct, it displays it at the top. For future uses, I need to make sure it can handle as many commands as needed before completing the simulation. This means inevitably I'll have content overflowing.
My solution now was setting the Y overflow to auto, adding the scrollbar, and a little jquery to keep the client scrolled to the bottom of the output div at all times, because the content is being appended below the previous content each time a user enters the correct command.
Right now this works fine, except I would like to remove the scroll bar. I'd like the content to behave in the same way overflow auto would and does, except without a visible scrollbar.
Is there a way I could do this with jquery or javascript?
I know I can do some css tricks to put some sort of black over the scrollbar with a z-index, but I'd like to avoid that if possible.
All you need is to add overflow: hidden to your container and scroll it once content is loaded:
div.scrollTop = div.scrollHeight;
Demo http://jsfiddle.net/nT75k/2/
Yes, you can add an event listener and when that event is emitted you can have it scroll down to the bottom by checking the height like so
$container = $('.container');
$container[0].scrollTop = $container[0].scrollHeight;
$('.input').keypress(function (e) {
if (e.which == 13) {
$container = $('.container');
$container.append('<p class="row">' + e.target.value + '</p>');
$container.animate({ scrollTop: $container[0].scrollHeight }, "slow");
}
});
http://jsfiddle.net/w2qbe/
Continue to use javascript to do the scrolling, and put the div containing your simulator inside another div that's slightly less wide and do overflow hidden on the outer div. I've used this technique a couple of times, and it's pretty fun.
The only thing your should be careful of is that scrollbars are slightly different widths in different browsers, so be careful.
for example:
html:
<div id="outside">
<div id="inside">
<div>more content 1</div>
<div>more content 2</div>
<div>more content 3</div>
<div>more content 4</div>
<div>more content 5</div>
<div>more content 6</div>
<div>more content 7</div>
<div>more content 8</div>
<div>more content 9</div>
<div>more content 8</div>
<div>more content 7</div>
<div>more content 6</div>
<div>more content 5</div>
<div>more content 4</div>
<div>more content 3</div>
<div>more content 2</div>
<div>more content 1</div>
</div>
</div>
css:
div#outside {
width: 120px;
height: 100px;
overflow: hidden;
}
div#inside {
width: 135px;
height: 100px;
overflow-y: auto;
}
Check out this fiddle -> http://jsfiddle.net/5bkz5/1/ <- and scroll down over the text!
div.scrollTop = div.scrollHeight;
but you do not need overflow: hidden.
Suppose I have 4 visible divs:
- 2 on top
- 2 on the bottom, wrapped in a container
and 1 hidden div.
When a mouse hover over a bottom div it changes its color and changes color of one of the top divs.
When user clicks on a bottom div the hidden div appears and stays on the screen until mouse leave the container.
I use if statements to change color of divs, but I'm not sure whether I'm doing this right. Maybe there is a more simple and elegant way to do this.
So there are the questions:
- Do I have to use if statement here? Maybe there is a way to somehow "link" pairs of elements to reduce the amount of code?
- What if I want a top div to stay active while hidden div is visible? Do I need to write additional function with if statements again? Wouldn't that be "do not repeat yourself" rule violation?
Code example here: http://jsfiddle.net/Xq9kr
You can create implicit links through structure.
For example with this HTML:
<div class="top">
<div>Div 1</div>
<div>Div 2</div>
</div>
<div class="bottom">
<div>Div 1</div>
<div>Div 2</div>
</div>
You can then select the respective div in the top via indices:
$('div.bottom > div').hover(function () {
var index = $(this).toggleClass('highlight').index();
$('div.top > div').eq(index).toggleClass('highlight');
});
Or you can create explicit links through data attributes and IDs.
<div class="top">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</div>
<div class="bottom">
<div data-for="div2">Div 2</div>
<div data-for="div1">Div 1</div>
</div>
Then select like this:
$('#' + $(this).attr('data-for')).toggleClass('highlight');
// Or, even better if you're using jquery-1.4.3+
$('#' + $(this).data('for')).toggleClass('highlight');