Applying x-transition on x-bind alpinejs - javascript

I did a little snippet where the image changes when you hover over it using x-bind, the change is very prompt so I wanted to add some transitions to it but it's not working. It seems x-transition might only work with x-show.
<div x-data="{image : 0}" class="h-3/5 mb-2 " >
<img class="h-full m-auto" x-bind:src="`/src/variants/${image}.jpg`" alt="" x-on:mousemove="image = 1" x-on:mouseout="image = 0" x-transition>
</div>

The documentation of x-transtion only talks about x-show. So it indeeds only works for x-show but why can't you use x-show? Hide the image with id 0 on hover and show the other image. Using x-transition on both of them?
Below a small example, you would still have to finetune this to your requirements offcourse. But x-transition works!
<script src="//unpkg.com/alpinejs" defer></script>
<div x-data="{hover : false}" class="h-3/5 mb-2" #mouseleave="hover=false">
<div #mouseover="hover = true">
<img x-show="hover" class="h-full m-auto" src="https://picsum.photos/id/237/200/300" alt="" x-transition>
<img x-show="!hover" class="h-full m-auto" src="https://picsum.photos/id/238/200/300" alt="" x-transition>
</div>
</div>

Related

Getting element values in jquery

I spent lots of time trying to figure out getting a values from an element using jquery. Here's the code
<div class="school">
<div class="school-prev">
<img src="images/photos.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Admin</h5>
<small class="text-muted">School Board</small>
</div>
<div class="school">
<div class="school-prev">
<img src="images/photos2.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Finance</h5>
<small class="text-muted">School Board</small>
</div>
Jquery Coe
$(document).ready(function(){
$(".school").click('.school-title', function(e){
var showValue=$(this).text();
alert(showValue);
});
});
Example of return values: Admin School Board;
Expected value is should be "Admin or Finance"
NB: Any solution should consider outside div(school) clickable and not school-title div alone.
Warm regards.
Try the following jQuery code:
$(document).ready(function(){
// console.log('th');
$(document).on('click','.school .school-title', function(e){
e.preventDefault()
var th = $(this); //change over here
console.log(th.text());
});
});
You can change $(".school").click('.school-title', function(e){ to $(".school").on('click', '.school-title', function(e) { and it will solve the problem for you.
After updating your NB, you can use:
$(document).ready(function() {
$(".school").click(function(e) {
var showValue = $('.school-title',this).text()
alert(showValue);
});
});
Demo
$(document).ready(function() {
$(".school").click(function(e) {
var showValue = $('.school-title',this).text()
alert(showValue);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="school">
<div class="school-prev">
<img src="images/photos.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Admin</h5>
<small class="text-muted">School Board</small>
</div>
<div class="school">
<div class="school-prev">
<img src="images/photos2.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Finance</h5>
<small class="text-muted">School Board</small>
</div>
You want a click anywhere in the school div to get the title - not just on the title itself. To do that, you just need to check for the school-title child element in the click function on school.
This will get all children with the class school-title (of which there will only be one - it works the same as find except on direct children only) and get the text from it:
$(document).ready(function(){
$(".school").click('.school-title', function(e){
var showValue=$(this).children('.school-title').text();
alert(showValue);
});
});
/* Just for illustration to make it easier to see what is happening */
.school { border: 1px solid #ccc;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="school">
<div class="school-prev">
<img src="images/photos.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Admin</h5>
<small class="text-muted">School Board</small>
</div>
<div class="school">
<div class="school-prev">
<img src="images/photos2.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Finance</h5>
<small class="text-muted">School Board</small>
</div>
You only have one child with school-title in this case, but it will work with multiple titles if needed (e.g. if you did want to get "Admin School Board" for example, you could simply add the school-title class to the text-muted element).
Reference: jQuery children documentation
You are using 'school' class name for the click event and want to get the value child element of div. That is not possible in this way.
Simply Change the code "$(this).text();" to "$(classname,this).text();".
Happy coding.

How to make Slide buttons in js

Hey i am working on a css slider it is working fine without js only with css but i want to make a js script for navigation buttons for slider i mean i want to make a js script that can slide the content left or right by clicking on left or right button and it has to make a loop i mean if you click button once then it has to slide content left or right by 100% each time and max width is 1000% of the content which i want to slide can anyone please help me for this
<div class="slider-10">
<div class="slider-box" style="width: 1000%">
<img src="img/image-1.jpg" />
<img src="img/image-2.jpg" />
<img src="img/image-3.jpg" />
<img src="img/image-4.jpg" />
<img src="img/image-5.jpg" />
<img src="img/image-6.jpg" />
<img src="img/image-7.jpg" />
<img src="img/image-8.jpg" />
<img src="img/image-9.jpg" />
<img src="img/image-10.jpg" />
</div>
</div>
And i want to slide this section:
<div class="slider-box" style="width: 1000%">
<img src="img/image-1.jpg" />
<img src="img/image-2.jpg" />
<img src="img/image-3.jpg" />
<img src="img/image-4.jpg" />
<img src="img/image-5.jpg" />
<img src="img/image-6.jpg" />
<img src="img/image-7.jpg" />
<img src="img/image-8.jpg" />
<img src="img/image-9.jpg" />
<img src="img/image-10.jpg" />
</div>
Please help me
You can set any img in a div element means 1 div for every imgtag then declare a function in js and call it with onclick event for EX: click right button sends 1 to function and left one -1.
then yo can add class for every div that should show.

Use Vue's directive to change Dom style but not working

I'm trying to use Vue to build my app but I have a problem with image loading speed. I have written a directive to control it:
<div style="width:1280px;height:800px;background-size:100% 100%" imgload="product.bgImg ">
<div class="backgroud" style="display: block" title="p1">
<div>{{product.productTitle}}</div>
<img src="" style="border-style:none" />
<div is="tip-compont" class="tips" v-bind:position="product.tips"></div>
<template v-for="r of product.rect">
<div is="rect-compont" shape="rect" v-bind:position="r" v-on:click="update()" ></div>
</template>
<template v-for="c of product.circle">
<div is="circle-compont" shape="circle" v-bind:position="c"></div>
</template>
</div>
</div>
Vue.directive('imgload',{inserted:function (el,binding,vnode,oldno) {
var img=new Image();
img.src=binding.value;
var sty='url('+binding.value+') no-repeat';
el.style.background=sty;
}})
But it doesn't seems to work. Images don't show on my screen.
You have to append a v- in your HTML to use it as Vue directive, like following:
<div style="width:1280px;height:800px;background-size:100% 100%" v-imgload="product.bgImg">
...
You can check more details in documentation.

Add href link to Image that has been displayed via js mouseover

I have three images that each change to a second image on mouseover. On mouseover they also reset the others to the standard image. This all works fine.
However..
I would like each of the second images to be clickable links to another page.
Hope someone can help, many thanks.
$(document).ready(function(){
$('#s1').mouseover(function(){
$('#s1').attr('src', 'images/object/click-1.png');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s2').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/click-2.png');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s3').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/click-3.png');
});
});
So the links would need to be on click-1.png, click-2.png, click-3.png.
<div id="section3" class="container-fluid" align="center">
<div class="row row-centered ">
<div id="top-box-1" class="col-sm-4">
<img src="images/object/standard-1.jpg" id="s1" width="300" height="300" />
</div>
<div id="top-box-2" class="col-sm-4">
<img src="images/object/standard-2.jpg" id="s2" width="300" height="300" />
</div>
<div id="top-box-3" class="col-sm-4">
<img src="images/object/standard-3.jpg" id="s3" width="300" height="300" />
</div>
</div>
</div>
Just make each image tag (s1, s2, and s3) a link. The actual src attribute of the img tag can change to display whatever image you want, it's really irrelevant. After all, A user can only click on something they've moused over.

jquery div scroll style coverflow

I need to achieve this effect
but I need to replace images by container (div)
something like:
<div id="myGallery">
<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" />
<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" />
<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" />
<img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" />
</div>
by
<div id="myGallery">
<div id="item1">contenido uno</div>
<div id="item2">contenido dos</div>
<div id="item3">contenido tres</div>
<div id="item4">contenido cuatro</div>
</div>
any ideas or any plugin?
Take a peek at this demo – it looks like it does what you want, and it shouldn't be too hard to modify the ideas from it for your purposes.

Categories

Resources