i have a problem that when i'm clicking my thumb-units it reloads the page it had to open but it is opening for 0.5 sec and then the thumb units returns again, what's wrong?
$( document ).ready(function() {
workSlider();
});
function workSlider() {
$('.thumb-unit').click(function() {
$('.work-slider').css('left' , '-100%');
$('.work-container').show();
});
$('.work-return').click(function() {
$('.work-slider').css('left' , '0%');
$('.work-container').hide(800);
});
}
here's my html, it should show the work container
<section class="alt-section section-work">
<div class="work-slider">
<div class="thumb-wrap">
<div class="thumb-container">
{% for project in site.data.settings.projects %}
<a href="" class="thumb-unit" style="background-image: url(/assets/img/work/{{project.folder}}/thumb.jpg);">
<div class="thumb-overlay">
<strong>{{ project.name }}</strong>
<div class="zoom-icon"></div>
</div>
</a>
{% endfor %}
</div>
</div>
<div class="work-wrap">
<div class="work-container">
<div class="work-return">{% include icons/icon-back.html %}</div>
<h4 color="black">Hey dude</h4>
<div style="width: 600px; height: 500px; background: #ccc;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/Y9dhSgnRl0s" frameborder="0" allowfullscreen></iframe>
</div>
<p>welcome to my world</p>
<div style="width: 600px; height: 500px; background: #ccc;"></div>
<p>welcome to my world</p>
<div style="width: 600px; height: 500px; background: #ccc;"></div>
<p>welcome to my world</p>
</div>
</div>
</div>
</section>
I think your page might be reloading on click because your not preventing the default behavior of your link.
Try this:
$('.thumb-unit').click(function(e) {
e.preventDefault();
$('.work-slider').css('left' , '-100%');
$('.work-container').show();
});
$('.work-return').click(function(e) {
e.preventDefault();
$('.work-slider').css('left' , '0%');
$('.work-container').hide(800);
});
This may be off base but since the .thumb-unit is an anchor tag, I believe you have to prevent the default event which is navigation, and with an empty href attribute should be to reload the page. Try this:
$('.thumb-unit').click(function(evt) {
evt.preventDefault();
$('.work-slider').css('left' , '-100%');
$('.work-container').show();
});
Since .work-return is a div, it is not necessary to add the same snippet to it since there is no default event that you need to prevent.
Related
I'm using Wow carousel in WordPress, and I want to get the text in the current element in the slider.
In Wow Carousel, the current slide takes the class center
My problem with the autoplay slider, the value stored in my variable doesn't change automatically
How can I fire the function when the class center is added automatically every time?
My code
<div id="testimonial-slider-5781" class="owl-carousel owl-loaded owl-drag">
<div class="owl-item active" style="width: 235.333px; margin-right: 15px;"><div class="testimonial-5781">
<h3> text </h3>
</div>
<div class="owl-item active" style="width: 235.333px; margin-right: 15px;"><div class="testimonial-5781">
<h3> text </h3>
</div>
<div class="owl-item active center" style="width: 235.333px; margin-right: 15px;"><div class="testimonial-5781">
<h3> text </h3>
</div>
<div class="owl-item" style="width: 235.333px; margin-right: 15px;"><div class="testimonial-5781">
<h3> text </h3>
</div>
</div>
jQuery(document).ready(function() {
function myFunction() {
let title = jQuery( "#testimonial-slider-5781 .center .testimonial-5781 h4" ).text();
jQuery("#service-title h3").text(title);
}
jQuery('.owl-prev').click(function(){
myFunction();
});
jQuery('.owl-next').click(function(){
myFunction();
});
});
You can listen to translated.owl.carousel event since it's triggered everytime carousel is translated, that would mean it's also triggered when class center is added to current slide.
Here is an example, do adapt to your own code as appropriate.
jQuery(document).ready(function() {
function myFunction() {
let title = jQuery("#testimonial-slider-5781 .center .testimonial-5781 h3").text();
jQuery("#service-title h3").text(title);
}
jQuery("#testimonial-slider-5781").on("translated.owl.carousel", function() {
myFunction();
});
});
I know there are lots of same examples, but their code don't work. Please Help! So I have arrow Image at the bottom of container block. The content of container are flex( if it is important to know?!) And when i click on arrow, it should move down by next container.
$("#arrow").click(function() {
var $target = $('.container.active').next('.container');
if ($target.length == 0)
$target = $('.container:first');
$('html, body').animate({
scrollTop: $target.offset().top
}, 'slow');
$('.active').removeClass('active');
$target.addClass('active');
});
.container {
height: 100%;
margin: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container first active" id="first">
///not important content
<button class="next">
<img src="arrow.png" id="arrow" alt="down">click
</button>
</div>
<div class="container second" id="second">
<div class="arrow">
<img src="arrowup.png" alt="up">
</div>
<div class="arrow">
<img src="arrow.png" alt="arrow">
</div>
</div>
You can simply use anchor tag and pass id of div you want to focus. Below is an example for that.
.container {
height: 100%;
margin: 0px;
}
.second, .first{
border : 1px solid black;
height : 500px;
width:100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container first active" id="first">
<!-- not important content -->
<a href="#second">
<img src="arrow.png" id="arrow" alt="down">click
</a>
</div>
<div class="container second" id="second">
<a class="arrow" href="#first">
<img src="arrowup.png" alt="up">
</a>
<div class="arrow">
<img src="arrow.png" alt="arrow">
</div>
</div>
https://jsfiddle.net/w7duthsa/ Try this. U should be careful where arrow event fires. It is in icon. u have to click to icon to run. Button doesn't down.
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().parent().next().offset().top);
return false; // prevent anchor
});
If u want to give up down to button then give arrow id to button and use function below https://jsfiddle.net/w7duthsa/1/
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().next().offset().top);
return false; // prevent anchor
});
I want an error handling script. If the image is not found, delete(or invisible) the failed loaded tag. I would appreciate any help!
HTML DOM:
<div class="swiper-slide" data-index="2" style="width: 145px; margin-right: 10px;">
<div class="swiper-slide-inside ">
<div class="align-vertical">
<img src="images/product_images/gallery_images/0690-05-bx_3.jpg" alt="Mobile" data-magnifier-src="images/product_images/popup_images/0690-05-bx_3.jpg">
</div>
</div>
</div>
JS:
document.querySelectorAll(".swiper-slide .img-responsive")[0].addEventListener("error", myFunction);
function myFunction() {
console.log('Image not found.');
document.querySelectorAll('.swiper-slide')[0].style.visbility = "hidden";
}
There are a couple of issues
img tag doesn't have the class you are using in your selector
you are trying to hide first swiper-slide, rather than parent swiper-slide
Demo
document.querySelectorAll(".swiper-slide img")[0].addEventListener("error", myFunction);
function myFunction(event) {
console.log('Image not found.');
//use document.querySelector('.swiper-slide').style.display = "none" if there is only one such element and discard below line
event.target.parentNode.parentNode.parentNode.style.display = "none";
}
<div class="swiper-slide" data-index="2" style="width: 145px; margin-right: 10px;">
<div class="swiper-slide-inside ">
<div class="align-vertical">
<img src="images/product_images/gallery_images/0690-05-bx_3.jpg" alt="Mobile" data-magnifier-src="images/product_images/popup_images/0690-05-bx_3.jpg">
</div>
</div>
</div>
I have this code that is a couple of links with divs inside them. When i click on one of the links it pops another div up that fills out using the "Case No" and "Type". However it only uses the data from the first link, not any other that i click.
HTML
<div class="plu-view-data">
<a href="#" id="tp_0">
<div class="tp-box">
<div style="width: 45%; float:left;" id="type">TICKET</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1234</div>
</div>
</a>
<a href="#" id="tp_1">
<div id="tp_id" class="tp-box">
<div style="width: 45%; float:left;" id="type">WRITTEN WARNING</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1235</div>
</div>
</a>
</div>
and the javascript is
$('.plu-view-data a').click(() => {
$("#pedlookup-overlay").css('display','block')
var type = $(this).find('#type').text()
var caseno = $(this).find('#case_no').text()
$('#plu-overlay-headbar').find('p').html(type+" || "+caseno)
})
Any idea as to why when i click the link it only uses the first link information?
The one tradeoff with using arrow functions is that there is no binding of this. To get it's context back you unfortunately have to go back to using the traditional function syntax (as it currently stands).
$('.plu-view-data a').click(function() {
...
});
You have duplicated id 'type' in your html. please change it.
$('.plu-view-data a').click(function() {
$("#pedlookup-overlay").css('display', 'block')
var type = $(this).find('#type').text();
var caseno = $(this).find('#case_no').text();
if (type && caseno) {
console.log(caseno);
$('#plu-overlay-headbar').find('p').html(type + " || " + caseno)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plu-view-data">
<a href="#" id="tp_0">
<div class="tp-box">
<div style="width: 45%; float:left;" id="type">TICKET</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1234</div>
</div>
</a>
<a href="#" id="tp_1">
<div id="tp_id" class="tp-box">
<div style="width: 45%; float:left;" id="type">WRITTEN WARNING</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1235</div>
</div>
</a>
</div>
I want to insert a span with a class using javascript inside this h5 tag which will apply to the first word:
<div class="container_skitter" style="width: 715px; height: 230px;">
<div class="image">
<a href="#">
<div class="label_skitter" style="width: 715px; display: block;">
<h5>Increase knife life</h5>
</div>
</div>
</div>
After
<div class="container_skitter" style="width: 715px; height: 230px;">
<div class="image">
<a href="#">
<div class="label_skitter" style="width: 715px; display: block;">
<h5><span class="firstword">Increase</span> knife life</h5>
</div>
</div>
</div>
Is it something like this?
<script>
$('h5').html(function (i, html) {
return html.replace(/(\w+\s\w+)/, '<span>$1</span>')
});
</script>
Can't seem to get it to work.
Thanks
Add this under document.ready. Your script runs too early before DOM has been loaded completely. Also you need to match only the first word so this is enough to select it. /(\w+\s)/
$(document).ready(function(){
$('h5').html(function (i, html) {
return html.replace(/(\w+\s)/, '<span class="test">$1</span>')
});
});
Fiddle
You are on the right track. Let's try and do this without JQuery!
<script>
Array.prototype.slice.call (document.querySelectorAll ('h5')).forEach
function (h5el) {
// we will come here with h5el referencing an h5 of the document
h5el.innerHTML = h5el.innerHTML.replace (/^(\w+)\s/,
'<span class="firstword">$1</span> ';
});
</script>
Place this script just before or just after the tag and presto, all your h5 elements will be modified.