In my joomla site I need a banner that is sliding from the top of the page.
Whole page should go down, when banner is sliding.
I made something like this, but the site don't do down:
html:
<div id="module">
<img src="http://preart.kylos.pl/przykladowy-banner.jpg" alt="headerContact">
</div>
<div id="whole-page">Whole page</div>
js:
$(document).ready(function(){
function slide(){
$("#module").delay(1000).animate({
"top":"10px"
},1000);
}
slide();
});
css:
#module {
top: -200px;
position: fixed;
}
#whole-page {
width: 100%;
height: auto;
}
http://jsfiddle.net/Elfiszcze/69x8dofu/1/
How can I achive this? Maybe there is a ready solution for joomla?
Related
I'm trying to add a transition between pages in a SvelteKit application. When navigating, the current page should fade out, and the new page should then fade in in its place. To accomplish this, in +layout.svelte, I wrapped the <slot> in a div with the in and out transitions set. I wrapped this all in {#key $page.url.pathname} so that the animations are triggered when navigating from page to page. However, my current code produces this effect:
When navigating, the content of the page updates before fading out. In other words, the destination page immediately appears, then fades out, then fades back in. At the same time, though, content in +layout.svelte (.title, at the top of the page) behaves correctly; just the content within the <slot> is bugged.
Here is the code:
+layout.svelte
<script lang="ts">
import '$lib/style.css';
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
</script>
<div class="page">
<div class="bar">
Sidebar
Page 1
Page 2
</div>
<div class="content-wrapper">
{#key $page.url.pathname}
<div class="content" in:fade={{ delay: 1000, duration: 1000 }} out:fade={{ duration: 1000 }}>
<div class="title">
{$page.url.pathname}
</div>
<slot />
</div>
{/key}
</div>
</div>
<style global>
.page {
display: flex;
flex-direction: row;
box-sizing: border-box;
width: 100vw;
min-height: 100vh;
}
.bar {
display: flex;
flex-direction: column;
width: 300px;
color: white;
background: black;
}
a {
color: white;
}
.content-wrapper {
flex-grow: 1;
width: 100%;
min-height: 100vh;
}
.content {
width: 100%;
height: 100%;
}
.title {
font-size: 2em;
}
</style>
+page.svelte
<div class="page">
<div class="title">Page 1</div>
</div>
<style>
.page {
width: 100%;
height: 100%;
background: blue;
}
</style>
page2/+page.svelte
<div class="page">
<div class="title">Page 2</div>
</div>
<style>
.page {
width: 100%;
height: 100%;
background: red;
}
</style>
Is there a way to get the <slot> content to wait for the out animation to finish before updating?
Its an issue with the lifecycle of the transitions for in and out.
I usually use in:fade ONLY on elements and it looks okay. It seems using both means that while one element is going out, another is coming in at the same time in which looks funny.
Perhaps you could find out more about delay in transitions and let us know..
Happy coding☺️
I'm trying to create a scroll animation similar to Apple (which there are a lot of codepen examples and tutorials for that, such as these: https://codepen.io/Maltsbier/pen/dyYmGGq or https://codepen.io/j-v-w/pen/ZEbGzyv). However, what I need is for it to not take over the entire screen, but instead, just a portion of the screen like a typical hero (around 600-700px) before allowing the user to scroll the rest of the page (which would just be regular html). I've sort of simulated it in this codepen (https://codepen.io/kmell/pen/RwQzjGp) using "position: sticky" and overflow: scroll on the parent div, but it only works when you use your mousewheel and scroll over the video itself. Basically, I'm looking for that effect, but when using the main scroll bar. I believe this will require some "scroll jacking" but after reading tons of articles and looking at a bunch of stackoverflow answers, I just can't seem to find anything that works and/or that I can understand/replicate. I'm also having trouble getting the text to scroll with the animation, but I think I can figure that part out. Anyway, any help, guidance or even just a push in the right direction would be greatly appreciated. Happy to provide more context if needed. Thank you!
Here's the HTML:
<div class="container">
<div class="app">
<div id="bound-one" class="scroll-bound">
<div class="content">
<div class="video-holder">
<video width="600" muted="" preload="" id="html5_video_cylzo56m54e">
<source src="https://cdn.ananaspizza.de/file/malte-image-store/v9-webm.webm" type="video/webm">
</video>
</div>
</div>
<div class="text-holder">
<h1>Here is the first bit of text</h1>
<p>Here is the first sub-title</p>
<h1 class="second-scroll">Here is the second bit of text</h1>
<p>Here is the second sub-title</p>
</div>
</div>
</div>
</div>
<div class="spacer">More Content would go here that does not require any of this scrolling functionality, just plain text.</div>
Here's the CSS:
.app { height: 700px; overflow-y: scroll; }
.scroll-bound { height:300vh; }
.scroll-bound .content { height: 700px; width: 50%; position: sticky; position: -webkit-sticky; top:0; }
.scroll-bound video { width: 100%; }
.second-scroll { margin-top: 115vh;}
/*.app::-webkit-scrollbar { display: none; }*/
.text-holder { width: 50%; position: absolute; top: 70px; right: 0; }
.spacer { min-height: 500px; background: #ccc; }
Here's the JS:
const registerVideo = (bound, video) => {
bound = document.querySelector(bound);
video = document.querySelector(video);
const scrollVideo = ()=>{
if(video.duration) {
const distanceFromTop = window.scrollY + bound.getBoundingClientRect().top;
const rawPercentScrolled = (window.scrollY - distanceFromTop) / (bound.scrollHeight - window.innerHeight);
const percentScrolled = Math.min(Math.max(rawPercentScrolled, 0), 1);
video.currentTime = video.duration * percentScrolled;
}
requestAnimationFrame(scrollVideo);
}
requestAnimationFrame(scrollVideo);
}
registerVideo("#bound-one", "#bound-one video");
I am working on a project. How can I use Javascript to reveal a centered image when clicking inside a box without using a button?
Like this you mean? I used javascript a little, but it works!!!
<!DOCTYPE html>
<html>
<body>
<div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetter()" id="one"></div>
<br />
<div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetterVerTwo()" id="two"></div>
<br />
<div style="background-color: red; width: 50px; height: 50px;" onclick="revealImg()" id="image"></div>
<script>
function revealImg() {
document.getElementById("image").innerHTML = "<img src='https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png' alt='Image' style='width: 50px; height: 50px;' />"
}
function xSignDisplayLetter() {
document.getElementById("one").innerHTML = "<img src='https://image.freepik.com/free-icon/x-symbol_318-1407.jpg' alt='Image' style='width: 50px; height: 50px;' />"
}
function xSignDisplayLetterVerTwo() {
document.getElementById("two").innerHTML = "<img src='https://d3qdvvkm3r2z1i.cloudfront.net/media/catalog/product/cache/1/image/1800x/6b9ffbf72458f4fd2d3cb995d92e8889/n/o/nope_newthumb.png' alt='Image' style='width: 50px; height: 50px;' />"
}
</script>
</body>
</html>
If you don't know javaScript a little, then there are js tutorials all over the web.
W3Schools is a good idea for short-term tutorials that teach you a lot, and is relatively fun to mess around with.
CodeCademy is a good long-term full code tutorial that will take a few weeks to learn but helps a million via your coding skill. You will need to sign up but it's free and saves all your work (code) when you're done.
You should load the image in your HTML and hide it using a CSS class like hidden. Then you will want to use addEventListener to run a function when the image is clicked, which toggles the visibility of the image. The centering of the image can also be done using CSS.
const blocks = document.querySelectorAll('.block');
blocks.forEach((block) => {
block.addEventListener('click', () => toggleVisibility(block.querySelector('img')));
});
function toggleVisibility(el) {
el.classList.toggle('hidden');
}
.container {
display: flex;
}
.block {
background-color: red;
padding: 10px;
}
.hidden {
display: none;
}
<div class="container">
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
</div>
add an onclick attribute to your boxes that calls a function that shows a hidden image.
<div onclick="showImages()"></div>
you can add onclick listener to div and in onclick function you can change div's class
<div class="redbox" id="box" onclick="showImage()"></div>
showImage(){
var box =document.getelementbyid("box").
box.classList.remove("redbox");
box.classList.add("image");
}
After learning JS for about a month now and completing around 4 courses I am still unable to work out how to change an image when clicking a thumbnail! What I want to do is simple, I just want to change the Main Image when a thumbnail is clicked! In this example there are two thumbnail images in a div and a main image above them. I just want to change the main image when a thumbnail is clicked. I know this is DOM Manipulation and think it is: document.getElementById.....?
I have make a small page so that I can learn / try different things and and finally giving up and asking for help! The code is as follows:
#MainContainer {
position: relative;
margin:0px auto;
width: 500px;
height: 400px;
border: 1px solid black;
}
#MainImage {
position: absolute;
top: 10px;
left: 50px;
width: 398px;
height: 265px;
background: url(MainImage01.jpg);
border: 1px solid black;
}
#TNBodyContainer {
position: absolute;
top: 290px;
left: 100px;
border: 1px solid black;
width: 268px;
height: 88px;
}
#TNOne {
position: relative;
width: 133px;
height: 88px;
background: url(SmallImage01.jpg);
}
#TNTwo {
position: relative;
left:135px;
width: 133px;
height: 88px;
background: url(SmallImage02.jpg);
}
<body>
<div id="MainContainer">
<div id="MainImage"></div>
<div id="TNBodyContainer">
<div id="TNOne">
<div id="TNTwo"></div>
</div>
</div>
Thank you very much for any help.
Margate
You need to add some scripting to change the image when either of the thumbnails are clicked. This function is called when the page is loaded. Change the image names to suit.
This should be placed in the section of the html page.
<script>
window.onload = function() {
var mainImg = document.getElementById('Main');
document.getElementById('TNOne').onclick = function() {
mainImg.src = 'main1.jpg';
//alert('one clicked');
};
document.getElementById('TNTwo').onclick = function() {
mainImg.src = 'main2.jpg';
//alert('two clicked');
};
};
</script>
The two thumbnail divs become <img> tags with the same IDs.
Similarly the main <img> is defined also (with id="Main"). Now the elements
are clickable.
<div id="MainContainer">
<div id="MainImage">
<img id="Main" src="MainImage01.jpg"</img>
</div>
<div id="TNBodyContainer">
<img id="TNOne" src="thumb1.jpg"></img>
<img id="TNTwo" src="thumb2.jpg"></img>
</div>
</div>
Finally CSS for the thumbnails, here float is used to keep the thumbnails in the same line within the TNBodyContainer div.
TNOne {
width: 133px;
height: 88px;
float:left;
}
#TNTwo {
width: 133px;
height: 88px;
float:left;
}
To change the image in the CSS background property, you need to use
document.getElementById("MainImage").style.background
The right way to go is to add event listeners:
document.getElementById("TNOne").addEventListener("click", function (event) {
setImage(event);
}, false);
document.getElementById("TNTwo").addEventListener("click", function (event) {
setImage(event);
}, false);
}
They both call the same function, but with event it is possible to see which one "clicked" with "event.target.id".
You can then decide what you want to do with for instance a switch statement. basically saying: if event.target.id == "TNOne".
You can see all this I made you a fiddle: http://jsfiddle.net/djwave28/32pQD/3/
There are some slight changes in your HTML and CSS too.
Is there any good way to display products on sliding banner in Magento ver 1.6.2.0 ?
I tried but I am facing two problems:
JavaScript conflicts (I used jquery.min.js for banner then after adding to cart, is not working)
I created new attributes for product image but I'm unable to call it on sliding banner.
Try the avalnache theme .
http://fastdivision.com/themes/avalanche/?utm_source=fastdivision.com&utm_medium=blog&utm_content=top-menu&utm_campaign=avalanche
Some really cool features in it.
You can custmise it futher, but is a good starting point.
HTH
create a CMS static block, set his identifier as 'home_slideshow', and paste in it's content:
<script type="text/javascript">
start_slideshow(1, 3, 3000);
function start_slideshow(start_frame, end_frame, delay) {
id = setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}
function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slide' + frame, { duration: 1.0 });
if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
Effect.Appear('slide' + frame, { duration: 1.0 });
if (delay == 1000) { delay = 3000; }
id = setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay);
})
}
function stop_slideshow() {
clearTimeout(id);
}
</script>
<div id="slideshowhomepage" style="height: 230px; position: relative;" onmouseover="stop_slideshow()" onmouseout="start_slideshow(1, 3, 1000)">
<div id="slide1" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 3; opacity: 1;"><img src="{{skin url='path/to/image1.jpg'}}" border="0" alt="" /></div>
<div id="slide2" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 2; opacity: 0;"><img src="{{skin url='path/to/image2.jpg'}}" border="0" alt="" /></div>
<div id="slide3" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 1; opacity: 0;"><img src="{{skin url='path/to/image3.jpg'}}" border="0" alt="" /></div>
</div>
then edit you're home CMS page and add this block:
{{block type="cms/block" block_id="home_slideshow" template="cms/content.phtml"}}
You can use Nivo Slider (one the most awesome jquery slider) for sliding banner.
If you want an easy way, just creating new group for homepage slider and adding images/slides to it then you can try the following extension for Magento:
http://www.magepsycho.com/jquery-sliders-pro-nivo-slider.html
You just need to add following code in your cms page:
{{block type="jquerysliderspro/slider" identifier="group-identifier-for-homepage-slider"}}
In fact you can use unlimited no of sliders anywhere in frontend.
Cheers