I'm hoping to add a very simple 'Resizable' function to each image. Like a single handle in the bottom right that allows users to resize them. For some reason, each time I try and insert the Resizable function into the script, the whole thing stops working. Right now it works great for dragging. Any tips? Thanks in advance!
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<div class="container">
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage8" width="190px" src="https://static.showit.co/file/02iVvuYJTPuHVo0bvmtfPw/118367/screen_shot_2022-06-09_at_4_29_57_pm.png" alt="bridal" style="position: absolute; left: 140px; top: -10px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage2" width="200px" src="https://static.showit.co/file/SniVsCT4TI6vlO11MeCT6Q/118367/pexels-amina-filkins-5425137.jpg" alt="pampasvase" style="position: absolute; left: 40px; top: 130px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage2" width="210px" src="https://static.showit.co/file/8kXF2aZnTFWacjGrsydtaw/118367/pexels-photo-5359324.jpg" alt="tent" style="position: absolute; left:250px; top: 350px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage9" width="180px" src="https://static.showit.co/file/ezoxZmgvQeyemX5jBU4P7g/118367/kaboompics_woman_s_legs_with_palm_shadow.jpg" alt="palmshadow" style="position: absolute; left: 285px; top: 150px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage3" width="190px" src="https://static.showit.co/file/O28TqyRjRtSLTMVN4lCgEw/118367/kaboompics_a_woman_in_a_brown_sweater_with_a_black_hat_on_her_head.jpg" alt="girlinhat" style="position: absolute; left: 600px; top: 100px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage12" width="200px" src="https://static.showit.co/file/5NDU0460Q8iptTNyt07LjA/118367/jonathan-borba-p1b9ztwa0di-unsplash.jpg" alt="dance" style="position: absolute; left: 890px; top: 370px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage12" width="190px" src="https://static.showit.co/file/801y1OPPQde-Zvl-zd4zbg/118367/screen_shot_2022-06-09_at_4_20_29_pm.png" alt="twigs" style="position: absolute; left: 870px; top: 10px;">
</p>
</div>
<div id="terracotta" class="draggableContainer">
<p>
<img class="draggableImage12" width="200px" src="https://static.showit.co/file/X5Z4ojapT2CA69e4yzFspA/118367/screen_shot_2022-06-09_at_4_18_25_pm.png" alt="chair" style="position: absolute; left: 750px; top: 300px;">
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script>
$(function() {
$(".draggableContainer").draggable({
stack: ".draggableContainer",
});
});
</script>
Related
I need to display (read-only) few line of json code accordingly to user selection (drop-down).
So i come up with Codemirror (version 3.20) and in particular to this few lines of code :
var selectedItem = data[index]; //accordingly with user selection i take the JSON
$(target).empty(); //container cleanup and then add a new Codemirror instance
var myCodeMirror = CodeMirror($(target)[0], {
value: JSON.stringify(selectedItem, null, 2),
tabSize: 4,
mode: { name: "javascript", json: true },
theme: 'monokai',
lineNumbers: true,
styleActiveSelected: true,
line: true,
readOnly: true
});
The monokai css is found and a bit of styling is applied, but usually constants and variables in code mirror became <div> with class like "cm-string" or "cm-operator". In my scenario all the code is represented in many <pre> element (with no class) and so no highlight.
Here the result and how it's displayed :
<div class="CodeMirror-scroll" tabindex="-1">
<div class="CodeMirror-sizer" style="min-width: 406.469px; margin-left: 26px; min-height: 168px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines">
<div style="position: relative; outline: none;">
<div class="CodeMirror-measure">
<pre style="text-align: left;"><span>x</span></pre>
</div>
<div style="position: relative; z-index: 1;">
<div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 0px; width: 869px; height: 16px;"></div>
<div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 144px; width: 8.79688px; height: 16px;"></div>
<div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 16px; width: 869px; height: 128px;"></div>
</div>
<div class="CodeMirror-code" style="">
<div style="position: relative;">
<div style="position: absolute; left: -26px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">1</div>
</div>
<pre>{</pre>
</div>
<div style="position: relative;">
<div style="position: absolute; left: -26px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">2</div>
</div>
<pre> "Index": 0,</pre>
</div>
<div style="position: relative;">
<div style="position: absolute; left: -26px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">3</div>
</div>
<pre> "Date": "2022-05-25",</pre>
</div>
<div style="position: relative;">
<div style="position: absolute; left: -26px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">4</div>
</div>
<pre> "Time": "19:31:03.550",</pre>
</div>
<div style="position: relative;">
<div style="position: absolute; left: -26px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">5</div>
</div>
<pre> "TimeZone": "+02:00",</pre>
</div>
<div style="position: relative;">
<div style="position: absolute; left: -26px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">6</div>
</div>
<pre> "LoggingLevel": "[DBG]",</pre>
</div>
<div style="position: relative;">
<div style="position: absolute; left: -26px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">7</div>
</div>
<pre> "Action": "ArticleBo.GetArticleByQuery",</pre>
</div>
<div style="position: relative;">
<div style="position: absolute; left: -26px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">8</div>
</div>
<pre> "Size": "9480",</pre>
</div>
<div style="position: relative;">
<div style="position: absolute; left: -26px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">9</div>
</div>
<pre> "Trace": null</pre>
</div>
<div style="position: relative;">
<div style="position: absolute; left: -26px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 18px;">10</div>
</div>
<pre>}</pre>
</div>
</div>
<div class="CodeMirror-cursor" style="left: 12.7969px; top: 144px; height: 16px; display: none;"> </div>
<div class="CodeMirror-cursor CodeMirror-secondarycursor" style="display: none;"> </div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 30px; width: 1px; top: 168px;"></div>
<div class="CodeMirror-gutters" style="height: 300px;">
<div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 26px;"></div>
</div>
</div>
As you can see each line is displayed as unique <pre> tag, and so the single words are not highlighted. I can't understand why (the monokai css is correctly loaded).
Make sure you use monokai.css and mode/javascript/javascript.js.
Here is an example that works.
const textarea = document.getElementById("editor");
textarea.value = '{"name":"John", "age":30, "car":null}'
let editor = CodeMirror.fromTextArea(textarea, {
tabSize: 4,
mode: { name: "javascript", json: true },
theme: 'monokai',
lineNumbers: true,
styleActiveSelected: true,
line: true,
readOnly: true
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.css" integrity="sha512-6sALqOPMrNSc+1p5xOhPwGIzs6kIlST+9oGWlI4Wwcbj1saaX9J3uzO3Vub016dmHV7hM+bMi/rfXLiF5DNIZg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/monokai.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.js" integrity="sha512-w8mdbtlkBpU0p/dbFb4Oa1Hfd5k2mvOX82w0FnArHOPB28Ixai1Uj68X/3aK+/+35zNbTzBf9OfuSG+XTwnwCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/mode/javascript/javascript.min.js" integrity="sha512-DJ/Flq7rxJDDhgkO49H/rmidX44jmxWot/ku3c+XXEF9XFal78KIpu7w6jEaQhK4jli1U3/yOH+Rp3cIIEYFPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<textarea id="editor" style="width:100%;min-height:10rem;">
</textarea>
I want to make an image slider that will cover fifty percent of the homepage. but somehow I can't make these photos sensitive. I want my carousel to shrink as it resizes. I just found some solutions with Jquery on the internet, but I want vanilla javascript or pure css & scss solution. How can I make my slider and photos responsive?
For demo: https://codepen.io/BerkayAkgurgen/pen/qBqMxeo
<main>
<div class="slider-container">
<div class="slider">
<div class="slider-img">
<img src="./img/batman-banner.jpg" alt="">
</div>
</div>
<div class="slider">
<div class="slider-img">
<img class="deneme2" src="./img/lord-of-the-ring.jpg" alt="">
</div>
</div>
<div class="slider">
<div class="slider-img">
<img src="./img/avengers.jpg" alt="">
</div>
</div>
<div class="slider">
<div class="slider-img">
<img src="./img/batman.jpg" alt="">
</div>
</div>
</div>
</main>
img {
display: block;
width: 100vw;
height: 100%;
object-fit: cover;
}
main {
position: relative;
width: 100vw;
height: 500px;
}
.slider {
width: 100vw;
max-height: 500px;
}
.slider-img {
width: 100vw;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
I got this problem that I've been trying to solve for quite a while. Ideally, I would love particles.js to have its "spawn box" stretch down to the bottom the page (7 x viewport as calculated by fullpage.js) so that when scrolling down with fullpage.js, the whole page's content just moves up one slide (hence having particles.js covering the entire height of the website from top to bottom)
This is what I got so far:
CODE
body, html {
margin: 0;
padding: 0;
}
#container {
max-width: inherit;
background: rgb(111, 210, 255);
}
#particles-js {
width: 100%;
height: 100%;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
width: 256px;
height: 256px;
margin-top: -128px;
margin-left: -128px;
z-index: 2;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="PachiSquid">
<title>PachiSquid</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" type="text/css">
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<script src="https://raw.githubusercontent.com/VincentGarreau/particles.js/master/particles.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['home', 'release', 'about', 'music', 'live', 'shop', 'contact'],
scrollingSpeed: 1000,
})
})
</script>
</head>
<body id="container">
<ul id="menu">
<li data-menuanchor="home">HOME</li>
<li data-menuanchor="release">RELEASE</li>
<li data-menuanchor="about">ABOUT</li>
<li data-menuanchor="music">MUSIC</li>
<li data-menuanchor="live">LIVE</li>
<li data-menuanchor="shop">SHOP</li>
<li data-menuanchor="contact">CONTACT</li>
</ul>
<div id="fullpage">
<div id="particles-js">
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
<div class="section active" id="section1">
<div class="intro">
<img class="logo" src="https://gdurl.com/7GCM">
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<p>
Release
</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<p>
About
</p>
</div>
</div>
<div class="section" id="section4">
<div class="intro">
<p>
Music
</p>
</div>
</div>
<div class="section" id="section5">
<div class="intro">
<p>
Live
</p>
</div>
</div>
<div class="section" id="section6">
<div class="intro">
<p>
Shop
</p>
</div>
</div>
<div class="section" id="section7">
<div class="intro">
<p>
Contact
</p>
</div>
</div>
</div>
<script>
particlesJS("particles-js",{"particles":{"number":{"value":13,"density":{"enable":true,"value_area":1000}},"color":{"value":"#ffffff"},"shape":{"type":"image","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"https://gdurl.com/0VzA","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":41.6,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":0.6,"direction":"top","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"window","events":{"onhover":{"enable":false,"mode":"grab"},"onclick":{"enable":false,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});
</script>
</body>
</html>
Basically my idea is: height: 100% is not working due to FullPage.js, so let's set a fixed height.
Here's your JSFiddle: https://jsfiddle.net/MrMavin/0gop9xp9/
Thanks to #Nic from How to get height of entire document with JavaScript?
Complete newbie here.
I need the following slideshow to work for all recent posts on the homepage (wordpress). Currently, it only works on the most recent post (latest post).
Here's my code in content.php:
<div id="textslider">
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
<?php echo get_field('slide1'); ?>
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
<?php echo get_field('slide2'); ?>
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
<?php echo get_field('slide3'); ?>
</p>
</div>
</div>
Here's my js code in header.php (Jonathan Snook's code):
<script src="http://code.jquery.com/jquery-latest.min.js">
<script>
$('#textslider > div:gt(0)').hide();
setInterval(function() {
$('#textslider > div:first').fadeOut(500)
.next()
.fadeIn(1000)
.end()
.appendTo('#textslider');
}, 3000);
</script>
PS: I know that Snook has multiple slideshow on the same page version but I can't get that to work at all. And for the above, changing the textslider from ID to class makes none of the slideshow to loop at all. Please help.
Thanks
UPDATE:
#Reddy Thank you for getting back to me. This is what the homepage looks like:
yulius Homepage
Test post 12's text slideshow works just fine (slides: "1","2","3"). Test Post 10 also has a text slideshow (slides: 'some text 1', 'some text 2', 'some text 3') but it doesn't work, as you can see, the words stack on top of one another.
This is the code for TEST POST 12 (most recent post):
<article id="post-78" class="post-78 post type-post status-publish format-standard hentry category-uncategorized post-grid">
<style type="text/css">
.post-78 { background-color: #000000 !important; }
</style>
<div class="post-cover post-cover-78 stag-image--none"></div>
<div class="post-content">
<header class="entry-header">
<h1 class="entry-title">
<a href="http://myweb.com/test-post-12/" rel="bookmark">
<span class="entry-title-primary">test post 12</span> <span class="entry-subtitle">subtitle bottom</span> </a>
<p class="entry-content">subtitle top</p>
<div id="textslider">
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
1
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
2
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
3
</p>
</div>
</div>
</h1>
</header><!-- .entry-header -->
<footer class="entry-meta">
<span class="posted-on"><time class="entry-date published" datetime="2016-03-02T16:06:39+00:00">March 2, 2016</time><time class="updated" datetime="2016-03-03T16:00:26+00:00">March 3, 2016</time></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span> </footer><!-- .entry-meta -->
</div>
</article>
This is the code for Test Post 11:
<article id="post-65" class="post-65 post type-post status-publish format-standard hentry category-uncategorized post-grid">
<style type="text/css">
.post-65 { background-color: #000000 !important; }
</style>
<div class="post-content">
<header class="entry-header">
<h1 class="entry-title">
<a href="http://myweb.com/test-post-11/" rel="bookmark">
<span class="entry-title-primary">test post 11</span> <span class="entry-subtitle">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</span> </a>
<p class="entry-content">yoohoo</p>
<div id="textslider">
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
</p>
</div>
</div>
</h1>
</header><!-- .entry-header -->
<footer class="entry-meta">
<span class="posted-on"><time class="entry-date published" datetime="2016-03-01T15:12:55+00:00">March 1, 2016</time><time class="updated" datetime="2016-03-02T15:41:23+00:00">March 2, 2016</time></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span> </footer><!-- .entry-meta -->
</div>
</article>
This is the code for Test POST 10 (This one also has a slideshow but as you can see, the texts stack on top of one another and the slideshow does not work at all):
<article id="post-63" class="post-63 post type-post status-publish format-standard hentry category-uncategorized post-grid">
<style type="text/css">
.post-63 { background-color: #000000 !important; }
</style>
<div class="post-content">
<header class="entry-header">
<h1 class="entry-title">
<a href="http:/myweb.com/test-post-10/" rel="bookmark">
<span class="entry-title-primary">test post 10</span> <span class="entry-subtitle">am super cool</span> </a>
<p class="entry-content">i am cool</p>
<div id="textslider">
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
"the coolest of all cakes!!!"
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
"super good"
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
"unbelievable"
</p>
</div>
</div>
</h1>
</header><!-- .entry-header -->
<footer class="entry-meta">
<span class="posted-on"><time class="entry-date published" datetime="2016-03-01T15:12:19+00:00">March 1, 2016</time><time class="updated" datetime="2016-03-03T18:02:40+00:00">March 3, 2016</time></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span> </footer><!-- .entry-meta -->
</div>
</article>
This is the Code for test post 9:
<article id="post-60" class="post-60 post type-post status-publish format-standard hentry category-uncategorized post-grid">
<style type="text/css">
.post-60 { background-color: #000000 !important; }
</style>
<div class="post-content">
<header class="entry-header">
<h1 class="entry-title">
<a href="http://myweb.com/test-post-9/" rel="bookmark">
<span class="entry-title-primary">test post 9</span> <span class="entry-subtitle">oblique is Cool</span> </a>
<p class="entry-content"></p>
<div id="textslider">
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
</p>
</div>
</div>
</h1>
</header><!-- .entry-header -->
<footer class="entry-meta">
<span class="posted-on"><time class="entry-date published" datetime="2016-03-01T15:11:49+00:00">March 1, 2016</time><time class="updated" datetime="2016-03-02T14:42:36+00:00">March 2, 2016</time></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span> </footer><!-- .entry-meta -->
</div>
</article>
Thanks again. Sorry about the split code blocks for posts 11, 10 and 9, not quite sure how to fix that.
Edit:
$('.textslider').each(function(){
$(this).children('div:gt(0)').hide();
});
$('.textslider').each(function(){
var parentDiv = $(this);
//alert(parentDiv);
setInterval(function() {
parentDiv.children('div:first').fadeOut(500)
.next()
.fadeIn(1000)
.end()
.appendTo(parentDiv);
}, 3000, parentDiv);
});
I'm not sure this is what you are looking for but... well hope it helps bringing some light onto you problem:
$('#textslider > div').each(function(){
$(this).children('p:gt(0)').hide();
});
$('#textslider > div').each(function(){
var parentDiv = $(this);
//alert(parentDiv);
setInterval(function() {
parentDiv.children('p:first').fadeOut(500)
.next()
.fadeIn(1000)
.end()
.appendTo(parentDiv);
}, 3000, parentDiv);
});
My html (divs...)
<div id="textslider">
<div>
<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>
<p>text5</p>
</div>
<div>
<p>texta</p>
<p>textb</p>
<p>textc</p>
<p>textd</p>
<p>texte</p>
</div>
<div>
<p>t1</p>
<p>t2</p>
<p>t3</p>
<p>t4</p>
<p>t5</p>
</div>
</div>
They all "animate" at the same time.
I'm working on this portfolio website for a guy who makes architecture models. For the gallery I used a ready-made code for a horizontal scroll. The code seems to work as expected in Safari and Firefox, but in Chrome I get this strange error involving the track pad scroll.
Here's the page:
http://www.modellverkstaden.com/modeller.html
When scrolling with the track pad in Chrome, the scroll automatically snaps back to the beginning. So the scroll is impossible to use. However, it works perfectly using an "external mouse". I also get an error with the menu button in the top. The right border of the button disappears, only in Chrome.
Would really appreciate some help in what this may have to do with and how I should proceed to make it work in Chrome and other browsers.
Here's the html for the specific gallery page I'm having trouble with:
<html lang="en-GB">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="description" content="Modellverkstaden">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="center.js"></script>
<script src="menu.js" type="text/javascript"></script>
<style>
.section {
display: block;
width: auto;
height: 500px;
max-height: 500px;
float: left;
margin-left: 20px;
}
.section img {
height: 100%;
position: relative;
}
p {margin-top: 1em;}
#content {
display: none!important;
padding-top: 6.3em!important;
}
img {
height: auto;
}
img.logo {
height: inherit;
}
#media only screen and (max-width: 800px) {
#content {
display: block!important;
}
img {
width: 100%;
}
img.logo {
width: inherit;
}
#top {
position: fixed;
}
}
</style>
<script src="Demo%20-%20Horizontal%20Scrolling-filer/jquery_002.js"></script>
<script src="Demo%20-%20Horizontal%20Scrolling-filer/jquery.js"></script>
<script>
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 1);
e.preventDefault();
});
});
</script>
<!-- Enable HTML5 for old browsers -->
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Modellverkstaden > Modeller</title>
</head>
<body>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<div id="hamburger"><img src="pics/menu.png" /></div>
<div id="top" style="position: fixed!important;">
<ul>
<li style="border: none;padding-left: 0;padding-right: 0;margin-right: 2em;">
<label><img class="logo" src="pics/logo.png"> </label>
</li>
<li class="menu">
Om
</li>
<li class="menu">
Kontakt
</li>
<li class="menu">
Uppdragsgivare
</li>
<li class="menu" id="active">
Modeller
</li>
</ul>
</div>
<div id="mob-menu"><ul><li>Om</li><li>Kontakt</li><li>Uppdragsgivare</li><li>Modeller</li></ul></div>
<div id="content">
<h1>Modeller</h1>
<div id="images">
<img src="pics/IMAG1306.jpg"><p></p>
<img src="pics/blandat-055.jpg"><p></p>
<img src="pics/blandat-069.jpg">
<img src="pics/IMAG0237.jpg"><p></p>
<img src="pics/IMAG1263.jpg"><p></p>
<img src="pics/diverse-paris-och-Csh-21-371.jpg"><p> </p>
<img src="pics/IMG_1464.jpg"><p> </p>
<img src="pics/IMG_1442.jpg"><p> </p>
<img src="pics/IMG_1477.jpg"><p> </p>
<img src="pics/IMG_9043.jpg"><p> </p>
<img src="pics/IMG_9067.jpg">
<img src="pics/IMG_9071.jpg"><p> </p>
<img src="pics/IMG_9161.jpg"><p> </p>
<img src="pics/IMG_9201.jpg"><p> </p>
<img src="pics/IMG_9658.jpg"><p> </p>
<img src="pics/IMG_9692.jpg"><p> </p>
<img src="pics/juni-10-181.jpg"><p> </p>
<img src="pics/juni-10-198.jpg"><p> </p>
<img src="pics/Kajen-4-JM-2012-B3.jpg"><p> </p>
<img src="pics/modellv-ffs-016.jpg"><p> </p>
<img src="pics/modellverkstaden2-(1-of-12).jpg"><p> </p>
<img src="pics/modellverkstaden2-(2-of-12).jpg"><p> </p>
<img src="pics/modellverkstaden2-(7-of-12).jpg"><p> </p>
<img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-002.jpg"><p> </p>
<img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-009.jpg"><p> </p>
<img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-023.jpg"><p> </p>
<img src="pics/titti,barnen-mm20061028-073.jpg"><p> </p>
<img src="pics/B19219_012.jpg"><p></p>
<img src="pics/B19219_017.jpg">
<img src="pics/B19219_023.jpg">
</div>
</div>
<div id="filler"></div>
<div id="container">
<div class="section yellow"><img src="pics/IMAG1306.jpg"><p></p></div>
<div class="section"><img src="pics/blandat-055.jpg"><p></p></div>
<div class="section"><img src="pics/blandat-069.jpg"></div>
<div class="section yellow"><img src="pics/IMAG0237.jpg"><p></p></div>
<div class="section yellow"><img src="pics/IMAG1263.jpg"><p></p></div>
<div class="section yellow"><img src="pics/diverse-paris-och-Csh-21-371.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_1464.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_1442.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_1477.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9043.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9067.jpg"></div>
<div class="section yellow"><img src="pics/IMG_9071.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9161.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9201.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9658.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/IMG_9692.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/juni-10-181.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/juni-10-198.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/Kajen-4-JM-2012-B3.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/modellv-ffs-016.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/modellverkstaden2-(1-of-12).jpg"><p> </p></div>
<div class="section yellow"><img src="pics/modellverkstaden2-(2-of-12).jpg"><p> </p></div>
<div class="section yellow"><img src="pics/modellverkstaden2-(7-of-12).jpg"><p> </p></div>
<div class="section yellow"><img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-002.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-009.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/Pinc-House-Blackbarn-Sport-Pacific-1.50-023.jpg"><p> </p></div>
<div class="section yellow"><img src="pics/titti,barnen-mm20061028-073.jpg"><p> </p></div>
<div class="section"><img src="pics/B19219_012.jpg"><p></p></div>
<div class="section"><img src="pics/B19219_017.jpg"></div>
<div class="section"><img src="pics/B19219_023.jpg"></div>
<div class="section"><a style="position: absolute;z-index: 1000;" href="modeller.html"><p>← Tillbaka</p></a></div>
<div class="clear"></div>
</div>
</body></html>
And here's the CSS for the elements involved in the horizontal scroll section:
#filler { position: absolute; top: 0; left: 0; width: 18750px; height: 100%; }
#container { width: 18750px; position: absolute; top: 40%; margin-top: -150px;margin-left: 12px; }
.section {
display: block;
width: auto;
height: 500px;
max-height: 500px;
float: left;
margin-left: 20px;
}
.section img {
height: 100%;
position: relative;
}