I work on my portfolio website, it's based on a fullpage.js and WordPress.
I would like to have fixed background with changing custom "background-color".
I add different "background-color" to every post with a custom field.
I change class name for visible section (post) inside a full page
script, visible post gets class "active".
I know that fullpage.js doesn't allow fixed elements, so I have to put some "background" div outside of full page wrapper (and WordPress loop too).
I don't know how to copy that "background-color" from a visible (class "active") section to a fixed background in a separate div.
There are some possibilities:
use js/jQuery to copy CSS "background-color" value from one ( class "active") div to another(fixed background div), but it has to be done dynamically. How? All scripts I found and tested works only once for first "active" background-color, and when section change (another div is "active") fixed background still has the first active section background-color.
or use php with custom query outside a loop - but I don't know how to filter with a specific class name "active". I have only basic script:
style="background-color:<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'background', true);
wp_reset_query();
how to add a filter for "active" class?
Any other ideas? Help!
EDIT2: I found two scripts which do what I need:
1 https://codepen.io/Funsella/pen/yLfAG
2 https://codepen.io/Funsella/pen/dpRPYZ
both change the background-color copying it from "source" div to second "target" div. I can keep "source" div inside a wordpress loop (fullpage wrapper too) and transfer the background-color value to my fixed background div outside of WP's loop and fullpage.
First script works with scroll events - so it probably won't work with fullpage.js plugin which doesn't scroll content.
But the second script does his job exactly how I needed. I tested it.
So the question is: can it be done in more simple way? Without additional jQuery plugin (in-view.js)? Just plain JS or jQuery?
So, you'll be showing various blog posts on a single page and want each one to have its own background color, correct? If so, try fullpage.js' sectionsColor option.
You can read about it here
https://github.com/alvarotrigo/fullPage.js#options
Here's an example from that page:
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
The documentation doesn't explain precisely what's happening here, but it looks like you're simply sending in an array of section colors in order of their appearance.
EDIT BASED ON COMMENTS:
From your picture I think I better understand what you're trying to do. Basically you want a slide layer (transparent) and a fixed background layer (color of active slide). First, is this parallex example what you're trying to achieve? https://alvarotrigo.com/fullPage/extensions/parallax.html#firstPage
If so, there is a basic example in the repo. If this won't accomplish exactly what you're trying to do, follow these directions:
Use the onLeave or afterLoad callback to make an ajax request to your site.
Query your posts using your post Id to retrieve the post attribute background.
Retrieve the background color and set/fade-in your background-color property.
Here's a very simple ajax request example using jQuery:
//set the function to perform for onLeave in the options
onLeave: goGetThatColor(index)
//not in your options
function goGetThatColor(index){
$.ajax({
method: "POST",
url: "get_post_color.php",
data: { id: index }
})
.done(function( color ) {
$(#background-element).css('background-color', color);
});
}
I'm just going based off of the documentation, the index that's passed in might be an arbitrary ordering or the post id from Wordpress. I'm not sure about that so you might have to grab the post id from an attribute in your dom.
Related
I have a Gutenberg website and I want to add animations that the use can control, I am using aos (animate on scroll) and I figured, if I create a class then loop over it and that adds the relevant data-aos values e.g.
$('.aos-fade-up').each(function(i) {
$(this).attr('data-aos', 'fade-up');
});
It works as intended, adds the relevant attribute, and the content is hidden, but nothing happens on scroll.
What is the problem here? The attribute is on, it hides the content but nothing happens on scroll.
Pen here: https://codepen.io/StuartAttain/pen/MWWzVpe
You have to init after you do the replacements:
https://codepen.io/farinspace/pen/bGVppQb
or do a AOS.refreshHard(); afterwards:
https://codepen.io/farinspace/pen/ExVKKrw
The page contains multiple sections. Each section is represented by a TD block (see code below), the actual page would show a ">" icon (hovering over it shows the a href: javascript:void(0)), and when manually clicked, it would expand the section by a POST call to the endpoint from the SPAN block.
<td id="abc-parent" data-column="parent" data-row="abc" class="mt-cell mt-center">
<a href="javascript:void(0)">
<span class="a-declarative" data-action="myitable-fetch-rows" data-myitable-fetch-rows="{"endpoint":"/hz/inventory/variation?parentRecord=abc","rowId":"abc"}">
<div class="mt-variation-icon mt-variation-expand"/>
</span>
</a></td>
I am looking to create a bookmarklet containing a line of JQuery. And when called, it would expand all collapsible sections of a page.
What I mean is something like this (note this does not achieve what I described above):
javascript:jQuery('.a-declarative').each(function(i,e){e.click()})
I think you are looking for the "Trigger" function:
.trigger( eventType [, extraParameters ] ) Description: Execute all handlers and behaviors attached to the matched elements for the given event type.
https://api.jquery.com/trigger/
So your code above should be something like:
$('.a-declarative').trigger('click');
Use at your own risk as this is not a very stable way to trigger events.
Create a global class .active for all the expandable areas (make sure they all have it, even if you have to add it after another class="another active")
Assure .active is the expanded state. Then call it like below.
$('.item').toggleClass('active');
Simple jsfiddle demo of this.
If for some reason you can't alter the mark-up to make a global active class, you may have to call it with all the 'expanded selectors' (but should be no reason for this)
$('.item').toggleClass('active expanded open');
For help on the bookmarklet aspect; this is a cool link that should help you out; but all you should be doing is defining the above in a function and then trigger with a .click() event.
Update! I just sent another pointer via comment section below; but you know you can add a class .active via jQuery to all the toggles that share same class or ID. But you will still have to investigate how the toggles were built on this external website for you to incorporate the expanded state with your new .active state. There is no way for use to know this as you didn't post that code; but it's typically found in the .css pretty easily.
$('td').find('.mt-center').addClass('active');
I'm trying to detect if a class is present and, if so, set the background attribute of another element. This is what I have but it's not working.
if(jQuery("#slider-banner").hasClass('living-nutrients'))
{
jQuery("#home-middle-first").css("background-image","[path to new background image]");
}
BTW - My next step is for this to detect it whenever the ID "slider-banner" changes, but so far I can't even get it to work once on page load. Any help would be greatly appreciated... Thanks!
EDIT: I changed from .attr to .css as instructed. Makes sense... but still not working. I've tried adding console.log message within the IF statement and got nothing also. Does that give anyone any more ideas?
Example HTML where class changes:
<img id="slider-banner" class="living-nutrients" src="[image path]">
Example HTML where I want to change background image:
<div class="home-middle-one-third" id="home-middle-first">
</div>
UPDATE:
For everyone who said it "should work"... you are right! Turns out that, as written, it doesn't like being in the footer of the page, but when I moved it to the head, presto!
The final piece of this puzzle is to have it detect and evaluate based on the #slider-banner changing, (or more accurately, which class is present for the ID'd area), not just the page loading, as is currently.
The ID is for one element of a slide within a slider. There are three possible classes I could assign to the ID depending on which slide is visible. So I need the script to evaluate every time a slide changes.
Any ideas? Thank you all!
background-image is a element's style property, not its own one.
So .css("background-image","[path to new background image]");
Almost!
if(jQuery("#slider-banner").hasClass('living-nutrients'))
{
jQuery("#home-middle-first").css("background-image","[path to new background image]");
}
css is the correct function to set a CSS attribute.
The attr will set an HTML attribute. <div attr='attr value'>
Edit
I'm kind of guessing about the functionality of your script here in the following example.
When you set the background-image of a HTML node, that's all it does is set the background image. You must also set the width and height accordingly, to all the node to be large enough to even see the background of the node. Background images will not automatically resize the node.
var slider = jQuery("#slider-banner"); // jQuery("#slider-banner") is slow, so we save it to a var if we use it more than once
console.log(slider); // should be this in Chrome: [<img id="slider-banner" class="living-nutrients" src="[image path]">]
if(slider.hasClass('living-nutrients'))
{
jQuery("#home-middle-first").css({
"background-image":"url("+slider.attr('src')+")", // url() for good meassures
//"background-image":slider.css('background-image'), //try this if that doesn't work
"height":slider.height(),
"width":slider.width()
});
}
Here is a working example.
Try this
jQuery("#home-middle-first").css("background-image","url([path])");
i want to implement a right side sliding menu similar to the one in amazon.com..
i am trying to use javascript to edit the script on every mouseover/onclick event..
i want to hide/show the table on every event.
function show(a){
var id="myMenu"+a
if (i<-12){
i=i+speed;
document.getElementById(id).style.left=i;
}
}
function hide(a){
var id="myMenu"+a
if (i>-135){
i=i-speed;
document.getElementById(id).style.left=i;
}
}
this should be good to show/hide the tables.. but how to id dynamically add two tables one over another..because the main menu table will always be visible, but the sub menu when hidden will be beneath the main menu..
any method to do the same?
am i in the right path?
Definitely on the right path, this is a good test of concept.
I would suggest you look at jQuery (or other JavaScript libraries like Scriptaculous) specifically at the slideToggle() and toggle() methods.
Don't want to give it all away, but take a look at the Amazon source code, you may get some helpful little tips. :P
I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..
What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>
You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.
Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.
As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.
For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage