jQuery window resize fires alert, doesn't fire function - javascript

I have the following pieces of code in my footer:
<script type="text/javascript">
jQuery(document).ready(function($){
var maxHeight1 = 0; $(".header-primary").each(function(){ if ($(this).height() > maxHeight1) { maxHeight1 = $(this).height(); } }); $(".header-primary").height(maxHeight1);
var maxHeight2 = 0; $(".header-secondary").each(function(){ if ($(this).height() > maxHeight2) { maxHeight2 = $(this).height(); } }); $(".header-secondary").height(maxHeight2);
});
<script type="text/javascript">
jQuery(window).resize(function($){
alert('I fire');
var maxHeight1 = 0; $(".header-primary").each(function(){ if ($(this).height() > maxHeight1) { maxHeight1 = $(this).height(); } }); $(".header-primary").height(maxHeight1);
var maxHeight2 = 0; $(".header-secondary").each(function(){ if ($(this).height() > maxHeight2) { maxHeight2 = $(this).height(); } }); $(".header-secondary").height(maxHeight2);
});
</script>
The first piece does its job properly. When I refresh/open the page, the elements that have the CSS classes mentioned inside this JS code, have the same size (of the biggest one).
When it comes to the window.resize part, it doesn't work at all. I've tried all kinds of wrappers to satisfy Firebug, but even when it doesn't display an error, the script still doesn't work. The alert included for testing purposes works, so window.resize fires properly.
I usually find solutions using the search engine, but this one is an exception. :(
HTML:
<div class="block">
<div class="block-big-item">
<h3 class="header-primary">BIG ITEM</h3>
</div>
<div class="block-small-items">
<div class="block-small-item">
<h3 class="header-secondary">SMALL ITEM</h3>
</div>
<div class="block-small-item">
<h3 class="header-secondary">SMALL ITEM</h3>
</div>
</div>
</div>

Related

How can i remove the rellax class when the screen width is smaller than 810px?

My problem is that i want to add the parallax effect (rellax class) to the class home-content when the screen size is above 810 px and remove it when its below. Plus, if possible i want to be able to add data-rellax-speed = "-4" when rellax is enabled.
The problem is that i have the error : rellax.js:141 Rellax: The elements you're trying to select don't exist. Surelly because it does not find .relax in HTML
Here is the HTML code of the section with .home-content
<section class="home content" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1 stagger1">👋 Bonjour, je suis</div>
<div class="text-2 stagger1">Eric</div>
<div class="text-3 stagger1">Et je suis un <span class="crimson" id="typing"></span></div>
<a class="stagger2" href="#contact">Me contacter</a>
</div>
</div>
</section>
Here is the JS so far (i am using Rellax.js in order to achieve parallax):
$(document).ready(function(){
// Parallax
var rellax = new Rellax('.rellax');
if(window.innerWidth < 810){
$('.home-content').removeClass('rellax');
}
})
$(window).resize(function(){
if(window.innerWidth < 810){
$('.home-content').removeClass('rellax');
}else{
$('.home-content').addClass('rellax');
}
});
Check for relax class or element before referencing:
var rellax;
$(document).ready(function(){
if ($('.rellax').length) rellax = new Rellax('.rellax');
if(window.innerWidth < 810) {
$('.home-content').removeClass('rellax');
}
})
$(window).resize(function(){
if(window.innerWidth < 810) {
rellax.destroy();
$('.home-content').removeClass('rellax');
} else {
$('.home-content').addClass('rellax');
rellax = new Rellax('.rellax')
}
});

FAQ page. Show and hide content, JQuery and CSS issue

I have an issue with showing and hiding content. I am not able to hide or show full content.
My problem is this class for styling faq-link-style. When I remove it, my read more and read less buttons/links work. I think it might be the way I wrote it in JQuery. I tried many different versions but could not get it working.
Example: $('.faq-link-style .read-more')
Is there another way to improve my code? I don't want to duplicate my code. Example: I don't want to get the content twice. Once for an intro (read less, faq-intro) And the other time for the full text (read more, faq-info)
Thanks in Advance
<div class="col-lg-4">
<div class="faq-all">
<div class="faq-item">
<h2><?php the_title(); ?></h2>
<article>
<div class="faq-intro">
<?php the_content(); ?>
</div>
<div class="faq-info">
<?php the_content(); ?>
</div>
<div class="faq-link-style">
Read More
Read Less
</div>
</article>
</div>
</div>
</div>
JQuery:
(function ($) {
$(document).ready(function () {
var showChar = 600; // How many characters are shown by default
$('.faq-intro').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var s = $(this).html();
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + " ... ";
$(this).html(html);
}
if(content.length < showChar){
$(this).parent().find('.read-less').hide();
$(this).parent().find('.read-more').hide();
}
});
$('.faq-info').hide();
$('.read-less').hide();
//read more
$('.read-more').click(function(){
$(this).siblings('.faq-info').show();
$(this).hide();
$(this).parent().find('.read-less').show();
$(this).siblings('.faq-intro').hide();
})
$('.read-less').click(function(){
$(this).siblings('.faq-info').hide();
$(this).hide();
$(this).parent().find('.read-more').show();
$(this).siblings('.faq-intro').show();
});
});
})(jQuery);
Your selectors are wrong, it should be:
$('.read-more').click(function(){
$(this).hide()
.siblings('.read-less').show().end()
.parent()
.siblings('.faq-intro').hide().end()
.siblings('.faq-info').show();
});
$('.read-less').click(function(){
$(this).hide()
.siblings('.read-more').show().end()
.parent()
.siblings('.faq-intro').show().end()
.siblings('.faq-info').hide();
});

jQuery .wrap .unwrap responsive

Forgive me, I am fairly new to javascript. I am trying to remove a div's parent below 980px wide and then add it back in above 980px. I am using the following code that I have put together from looking at other jQuery.
jQuery(window).resize(function () {
var Tags = jQuery( ".case-studies .items-row div.span4" );
var wi = jQuery(window).width();
if (wi < 980) {
if ( Tags.parent().is( "div.items-row.cols-3.row-0.row-fluid" ) ) {
Tags.unwrap();
}
} else {
(Tags.wrap.parent( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}
});
I'm guessing you will realise I am experiencing a few issues!
The jQuery doesn't apply below 980px on page load, however when you start with a large screen size and shrink the width below 980px the jQuery works.
Once the jQuery has fired and the screen size goes above 980px, the div that has been removed does not get reapplied.
Please explain where I have gone wrong as I would like to learn.
Thanks for your time
UPDATE
The html before any jQuery is:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div class="span4"></div>
</div>
</section>
With the following jQuery:
jQuery(window).load(function () {
var Tags = jQuery( ".case-studies .items-row div.span4" );
var wi = jQuery(window).width();
if (wi < 980) {
if ( Tags.parent().is( "div.items-row.cols-3.row-0.row-fluid" ) ) {
Tags.unwrap();
}
}
else {
Tags.wrap( "<div></div>");
}
});
This now occurs above 980px on page load:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div>
<div class="span4"></div>
</div>
</div>
</section>
And when i refresh the page below 980px:
<section>
<div class="span4"></div>
</section>
The result below 980px is correct, however only runs when i refresh the screen. The result above 980px is not my intended result, i would like it to remain or return to:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div class="span4"></div>
</div>
</section>
#1: Call the function once on page load, that way you don't need to resize to get it
#2:
else {
(Tags.wrap.parent( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}
should be
else {
(Tags.wrap( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}

Issue with hidden div with responsive slider in a wordpress website

So basicly I want to have 2 buttons (one for map and one for recent posts). I implemented it by making jQuery script for the hiding/showing the divs as it follows:
<div id="main-choice" style="height:100%; width:100%;">
<button class="buttons" id="button-region">News by regions</button>
<button class="buttons" id="button-latest-news">Latest news</button>
</div>
<div class="hide" id="world-map-chosen" style="width:100%;"><button id="back-to-choice-1">Back</button>
<?php build_i_world_map(1); ?></div>
<div class="hide" id="latest-news-chosen" style="height:400px; width:100%;"><button id="back-to-choice-2">Back</button>
<?php echo get_new_royalslider(1); ?> </div>
<script>
$("#world-map-chosen").hide();
$("#latest-news-chosen").hide();
$('#button-region').click(function() {
$('#main-choice').fadeOut('slow', function() {
$("#world-map-chosen").fadeIn("slow");
});
});
$('#button-latest-news').click(function() {
$('#main-choice').fadeOut('slow', function() {
$("#latest-news-chosen").fadeIn("slow", function(){
fireOnResizeEvent();
});
});
});
$('#back-to-choice-1').click(function() {
$('#world-map-chosen').fadeOut('slow', function() {
$("#main-choice").fadeIn("slow");
});
});
$('#back-to-choice-2').click(function() {
$('#latest-news-chosen').fadeOut('slow', function() {
$("#main-choice").fadeIn("slow");
});
});
</script>
</div>
and in the head tag:
<script language="JavaScript" >
function fireOnResizeEvent() {
var width, height;
if (navigator.appName.indexOf("Microsoft") != -1) {
width = document.body.offsetWidth;
height = document.body.offsetHeight;
} else {
width = window.outerWidth;
height = window.outerHeight;
}
window.resizeTo(width - 1, height);
window.resizeTo(width + 1, height);
}
window.onresize = function() {
alert("Resized!");
}
</script>
My issue is that the slider and the map are taking the hidden state size and not refreshing when shown by the script.
As you can see i tried to include a function in the jQuery that resize the window after the load, but without luck.
Both the functions for loading the map and the slider are working correctly.
Could you please help me solve this one by helping me fix this code or give me some ideas how should i make it?

Obtain id of current element in view

I have a list of items that are organized in an alphabetical order on a page. I would like to create a fixed element at the side of the page that shows, which letter section you are currently scrolling by.
For example, if you are scrolling past items starting with the letter 'D', the fixed div will show 'D'. I have been trying to create this with jQuery, but have been finding it tricky.
Each section has the class 'card-container' and an 'id' corresponding to the current letter.
ie.
<div id="a" class="card-container">
...
</div>
<div id="b" class="card-container">
...
</div>
<div id="c" class="card-container">
...
</div>
...
Any idea how I can accomplish this?
EDIT
So far I have this:
$(window).scroll(function() {
var winTop = $(this).scrollTop();
var letters = $('.card-container');
letters.each(function(section) {
if($(this).position().top <= winTop) {
console.log($(this).context.id);
$('.letter-show h3').text($(this).context.id);
}
});
});
So this seems to work, but I feel like it's not very performant. Any suggestions to improve on this?
As I said in the comment: There's not much you can do to improve your code - a few millisecond gain at most. Stuff like minimizing the DOM lookups and breaking the loop when the right element is found, dropping jQuery, etc... But I doubt you'd notice a difference even on the slowest machine you can find around.
var letters = $('.card-container');
var letterShow = $('.letter-show h3');
$(window).scroll(function() {
var winTop = $(this).scrollTop();
letters.each(function(section) {
if($(this).position().top <= winTop) {
letterShow.text($(this).context.id);
}
});
});
.card-container {height: 300px;border-top: 1px solid}
.letter-show {position: fixed}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="letter-show"><h3></h3></div>
<div id="a" class="card-container">
...
</div>
<div id="b" class="card-container">
...
</div>
<div id="c" class="card-container">
...
</div>
<div id="d" class="card-container">
...
</div>
<div id="e" class="card-container">
...
</div>
This is what did the trick:
$(window).scroll(function() {
var winTop = $(this).scrollTop();
var letters = $('.card-container');
letters.each(function(section) {
if($(this).position().top <= winTop) {
$('.letter-show h3').text($(this).context.id);
}
});
});

Categories

Resources