I am a beginner of the javascript. I want to remove the data-toggle attribute when the screen size is less than 760px and make the href working. I have no idea how to remove the data-toggle attribute, below is my code:
<div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target="#myModal1" href="http://www.example.com/main/includes/onepager/business_service/example/index.php" class="b-link-stripe b-animate-go thickbox">
<img class="p-img" src="http://www.example.com/theme/mobile-page-files/web/images/small-portfolio/example.JPG" />
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03">
<img src="http://www.example.com/theme/mobile-page-files/web/images/link-ico.png" alt=""/>
</h2>
</div>
</a>
</div>
<div class="port-info">
<h4>
Example
</h4>
</div>
</div
At the bottom of your page (just before the </body> tag) add the following code :
if(window.innerWidth < 760){
document.getElementsByTagName("a")[0].removeAttribute("data-toggle");
}
Nobody addressed the case when the screen width might again be greater than 760. We'll have to add the data attribute back.
window.addEventListener("resize", resizeHandler);
function resizeHandler() {
var winWidth = window.innerWidth,
threshold = 760,
els = document.getElementsByClassName('thickbox');
[].forEach.call(els, function (el) {
if (winWidth < threshold) {
el.removeAttribute("data-toggle");
} else {
el.setAttribute("data-toggle", "bar");
}
});
}
Check out this tiny demo to see it in action. http://codepen.io/antibland/pen/reZNNO
You can use a bit of jQuery... Don't forget to update the selector ELEMENTID
if($(window).width() < 760){
$('#ELEMENTID').find('a').removeAttr('data-toggle');
}
Related
I am trying to create a very simple slideshow using jQuery code with only 3 pictures.
I use the next() method to show the next image. This is how it should work:
When you click on a link (class="next"), a method is called which hides the current image and shows the next image and adds 1 to a counter (i) unless a 3rd image. Then, it hides the current image and shows first image (id="first").
It's OK when you click on the first or second image and works correctly, but when you click on the 3rd image, it just hides the current image but it doesn't show first picture.
var a = new Array();
$("#slideShow").children().first().show();
$("#slideShow").children().first().next().hide();
$("#slideShow").children("div").last().hide();
var i = 0
$(".next").click(function() {
if (i == 2) {
$(this).parent().hide();
$("#first").show();
i = 0;
} else {
$(this).hide();
$(this).siblings().hide();
$(this).parent().next().show();
i++;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=slideShow>
<div id="first">
<img src="https://i.stack.imgur.com/XZ4V5.jpg">
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<div>
<img src="https://i.stack.imgur.com/7bI1Y.jpg">
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<div>
<img src="https://i.stack.imgur.com/lxthA.jpg">
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</div>
These are some ways I tried:
Using css({"display":"block"}) instead of show() in jQuery
Using Javascript syntax instead of jQuery: document.getElementById("first").show();
Traversing instead of using id: $(this).parent().parent().show;
However these didn't work.
Your logic isn't quite correct as you hide the content of the slide div, then try and call show() on the slide div, not its content.
A better approach is to use a class to track the active slide and move to the next() one on button click:
let $slides = $('#slideShow > div');
$(".next").click(function() {
let $current = $slides.filter('.active').removeClass('active');
let $target = $current.next('div');
if (!$target.length)
$target = $slides.first();
$target.addClass('active');
})
#slideShow > div {
display: none;
}
#slideShow div.active {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideShow">
<div class="active">
Screen 1
<img src="img\Screenshot (1).png">
</div>
<div>
Screen 4
<img src="img\Screenshot (4).png">
</div>
<div>
Screen 15
<img src="img\Screenshot (15).png">
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
The problem is that you show() the parent <div> but you also hide() the <img> / <a> children and never show() them again.
Remove:
$(this).hide();
$(this).siblings().hide();
and add:
$(this).parent().hide();
then you should be ok. Without changing any of your other logic, this gives:
var a = new Array();
//$("#slideShow").children().first().show();
//$("#slideShow").children().first().next().hide();
//$("#slideShow").children("div").last().hide();
$("#slideShow>div").hide().first().show();
var i = 0
$(".next").click(function() {
if (i == 2) {
$(this).parent().hide();
$("#first").show();
i = 0;
} else {
//$(this).hide();
//$(this).siblings().hide();
$(this).parent().hide();
$(this).parent().next().show();
i++;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=slideShow>
<div id="first">
<img src="https://i.stack.imgur.com/XZ4V5.jpg" width=200>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<div>
<img src="https://i.stack.imgur.com/7bI1Y.jpg" width=200>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<div>
<img src="https://i.stack.imgur.com/lxthA.jpg" width=200>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</div>
I would recommend SwiperJS
However, this might be a quick solution to your problem
$(".prev").click(function() {
//go to previous slide
var activeSlide = $("div.active"),
previousSlide = activeSlide.prev()
//check if there is previous slide
if (previousSlide.length !== 0) {
activeSlide.removeClass("active")
previousSlide.addClass("active")
} else {
alert("there is no previous slide!")
}
})
$(".next").click(function() {
//go to next slide
var activeSlide = $("div.active"),
nextSlide = activeSlide.next()
//check if there is next slide
if (nextSlide.length !== 0) {
activeSlide.removeClass("active")
nextSlide.addClass("active")
} else {
alert("there is no next slide!")
}
})
#slideShow > div{
display:none;
overflow:hidden;
height:120pt;
width:250pt;
}
#slideShow > div img{
width:100%;
}
#slideShow > div.active{
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=slideShow>
<div class="active">
<img src="img\Screenshot (1).png" alt="slide1">
</div>
<div>
<img src="img\Screenshot (4).png" alt="slide 2">
</div>
<div>
<img src="img\Screenshot (15).png" alt="slide 3">
</div>
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
I can't manage to resize the size of the navbar logo using javascript.
I'm new to Javascript.
Thank you all.
$(window).on("scroll", function() {
var logo = document.getElementsByClassName("logo");
if ($(window).scrollTop()) {
$('nav').addClass('white');
logo.style.width = '30px';
} else {
$('nav').removeClass('white');
logo.style.width = '60px';
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<img src="assets/images/Logo.png" alt="logo" class="logo">
</nav>
</header>
Off the bat I see that you're using getElementsByClassName method which returns an array. If you are using JQuery, and it looks like you are, I recommend saying logo = $('.logo'); or changing it to an id and using getElementById.
You may not need jquery
<script>
let logo = document.querySelector('#logo')
let nav = document.querySelector('#nav')
if(window.scrollTop > 0){
nav.classList.add('white')
nav.style.width= "30px"
}else{
nav.classList.add('white')
nav.style.width= "30px"
}
</script>
and add id to your img tag
<img id="logo" class="logo" src="..some.jpg" alt="some image">
Hello I have tried doing the equal heights js code but its not working for me somehow,
this is my js fiddle: jsfiddle
I think im missing something with the classes?
Thanks in advance for any help
this is my html:
// equal heights - plugin
;(function($) {
$.fn.equalHeights = function() {
var maxHeight = 0,
$this = $(this);
$this.each( function() {
var height = $(this).innerHeight();
if ( height > maxHeight ) { maxHeight = height; }
});
return $this.css('height', maxHeight);
};
})(jQuery);
$(document).ready(function(){
var equaliseMozaic = function(){
$('.jury-president__block').equalHeights();
console.log('reset');
};
// make mozaic blocks equal heights
if( $('.jury-president__block').length > 0 ){
// equalise mozaic blocks
equaliseMozaic();
// equalise mozaic blocks on resize
var throttledequaliseMozaic = _.throttle(equaliseMozaic, 500);
$(window).resize(throttledequaliseMozaic);
}
});
.jury-blocks{}
.jury-president__block{width:100px; display: inline-block; background-color:gray;}
.jury-president__block img {width:50px;}
<div class="jury-blocks">
<div class="jury-president__block grid-20">
<a href="">
<img src="http://placekitten.com/g/300/300" alt="">
</a>
<div class="jury-president__category"> Name<br>erwer</div>
<div class="jury-president__name"> Name, Juror Company</div>
</div>
<div class="jury-president__block grid-20">
<a href="">
<!--- <img src="http://placekitten.com/g/300/300" alt=""> --->
<img src="http://placekitten.com/g/300/300" alt="">
</a>
<div class="jury-president__category"> Name</div>
<div class="jury-president__name"> Name, Juror Company</div>
</div>
<div class="jury-president__block grid-20">
<a href="">
<!--- <img src="/assets/images/female-silhouette.jpg" alt=""> --->
<img src="http://placekitten.com/g/300/300" alt="">
</a>
<div class="jury-president__category"> Name</div>
<div class="jury-president__name"> Name, Company</div>
</div>
Adding this seems to make it work:
.jury-blocks{display:flex;}
Does this plunk have the behavior you were looking for? http://plnkr.co/edit/mPCw3Firht2lbdEMRCpn?p=preview If not, I can try again.
Additionally, your fiddle did not include jQuery or underscore, both of which appear to be necessary. Once I included those in my plunk, the heights were correct, the divs were just not all positioned correctly.
Add CSS
.jury-blocks { display: table; }
.jury-president__block{ display:table-cell; vertical-align:top;}
No need of JS
i have made script that makes my page bit better but it has terrible animated script and i want to know how to make it better
best would be slide to side and opacity change to 0
I don't know much about JS this took me week to make it work :S
HTML:
<div id="menu-content">
<a id="5home" class="show" href="#">Home</a>
<a id="5contact" class="show" href="#">Contact</a>
<a id="5about_us" class="show" href="#">About us</a>
<a id="5a_team" class="show" href="#">A-Team</a>
<a id="5connect" class="show" href="#">Connect</a>
<a id="5donate" class="show" href="#">Donate</a>
</div>
<div class="cont" id="home" style="Display :visible ;">
</div>
<div class="cont" id="contact" style="Display :none ;">
</div>
<div class="cont" id="about_us" style="Display :none ;">
</div>
<div class="cont" id="a_team" style="Display :none ;">
</div>
<div class="cont" id="connect" style="Display :none ;">
</div>
<div class="cont" id="donate" style="Display :none ;">
</div>
JS:
$(document).ready(function(){
$('.show').click(function menu() {
var id = '#';
id += this.id;
id = id.replace(/5/, '');
if ($(id).is(':visible')) {
}
else {
var ido = '#';
ido += $('.cont:visible').attr('id');
$(ido).animate({
opacity: 'toggle',
}, 350);
$(id).animate({
opacity: 'toggle',
}, 350);
}
});
});
In javascript there is a plugins named JQuery that have much functionnalities.
Function fadeOut() permit to hide some HTML element and fadeIn() to show.
To get a sweet cross-fade effect working on the opacity property just use the animate method jQuery with step and done. In this Fiddle you'll find all div in absloute position in a container div with relative position, using index jQuery method all IDs become useless
all jQuery code you need is
<script type="text/javascript">
$(document).ready(function(){
$('div.ok').css('opacity','1')
$('.show').click(function() {
var ind=$(this).index();
$('#container').find('div:eq('+ind+')').animate({'opacity':'1'},{
duration:1000,
step:function(gox){
var op = gox
var op = gox < 1 ? (1 - gox) : 0;
$('#container').find('div.ok').css('opacity',op)
},
complete:function(){
$('#container div').removeClass('ok')
$('#container').find('div:eq('+ind+')').addClass('ok')
}
});
});
});
</script>
I have four thumbnail divs called .jobs enclosed by a #job-wrap. Upon clicking a .job, #job-wrap needs to fadeOut, empty, load .job info in, and fadeIn. However, once emptying the #jobwrap, the rest of my site shoots up due to the .jobs no longer taking any height real estate. How can I maintain #job-wrap's height after I empty it, and load contents in.
$('.job').click(function(){
var job = $(this).attr("name");
var jh = $('#job-wrap').height();
$('#job-wrap').css('height', jh);
alert(jh);
$('#job-wrap').fadeOut(700, function(){
$(this).empty();
$(this).load("content.html#" + job, function(){
$(this).fadeIn(700);
});
});
});
Here I've tried to set the current #job-wrap's height to itself before the empty begins. (it doesn't work, although the alert does give the current height which varies due to the sites responsiveness)
<div id="job-wrap">
<a class="link">
<div class="job" name="eventuall">
<div class="job-img">
<img src="images/thumb-eventuall.png" />
</div>
<div class="job-blurb">
<h3>Eventuall</h3>
<p>UX Design, Front End </p>
</div>
</div>
</a>
<a class="link">
<div class="job">
<div class="job-img">
<img src="images/thumb-audivy.png" />
</div>
<div class="job-blurb">
<h3>Audivy</h3>
<p>UX Design</p>
</div>
</div>
</a>
</div>
Here is the HTML the function acts upon. Any help is greatly appreciated.
Set a min-height to #job-wrap and instead of fading in and out, animate the opacity instead. The fade method sets the element display to none in the callback function.
$('.job').click(function(){
var job = $(this).attr("name");
var jh = $('#job-wrap').height();
$('#job-wrap').css('height', jh);
$('#job-wrap').animate({opacity: 0}, 700, function(){
$(this).empty();
$(this).load("content.html#" + job, function(){
$(this).animate({opacity: 1}, 700);
});
});
});
.fadeOut() fades down and then sets the div to display: none; - Maybe you can change the opacity and use visibility: hidden; or some other property that keeps the div's place in tact? That seems to be the main problem I find with most jQuery methods that end in display: none; --- on the other hand, if you have set sizes, you could put a wrapper around it and then maybe just have the div inside it do what you are doing now.
I would suggest using min-height as well as outerHeight, and adding an inner wrapper. The outer wrapper will stay visible, and you set the min-height on the outer wrapper. The inner wrapping div is the element that gets emptied and hidden see http://jsfiddle.net/mf933/1/ or use below code:
$('.job').click(function(){
var job = $(this).attr("name");
var jh = $('#job-wrap').outerHeight();
$('#job-wrap').css('min-height', jh);
alert(jh);
$('#job-wrap-inner').fadeOut(700, function(){
$(this).empty();
$(this).load("content.html#" + job, function(){
$(this).fadeIn(700);
// uncomment to reset the min-height after loading
// $('#job-wrap').css('min-height', 'inherit');
});
});
});
HTML:
<h1>Top Content</h1>
<div id="job-wrap">
<div id="job-wrap-inner"> <a class="link">
<div class="job" name="eventuall">
<div class="job-img">
<img src="images/thumb-eventuall.png" />
</div>
<div class="job-blurb">
<h3>Eventuall</h3>
<p>UX Design, Front End </p>
</div>
</div>
</a>
<a class="link">
<div class="job">
<div class="job-img">
<img src="images/thumb-audivy.png" />
</div>
<div class="job-blurb">
<h3>Audivy</h3>
<p>UX Design</p>
</div>
</div>
</a>
</div>
</div>
<h1>Bottom Content</h1>