There is probably an answer for this but I have no idea of the terminology I would search for unfortunately!
Basically, there is a button on my Wordpress website at the top right which when clicked, pulls down a form to fill out. What's the easiest way of creating a button further down the page which would open that pulldown and take the user up there, presumably with an anchor? Simple HTML/CSS would be ideal because A: I can create a text box in the page layout creator and just paste the code in there and B: My coding knowledge is quite limited!
The website is www.harringtonsproperty.co.uk. The button in question is the BOOK A VALUATION at the top right.
Thank you!
This cannot be done with CSS alone. You need to use JavaScript.
Currently, the 'click' event is described at the top of the custom.js file. You'll need to add an additional JS function into this file to achieve what you want. For starters/example:
jQuery('button#contactToggle2').click(function(e){
e.preventDefault();
if( jQuery('#contactSlide').css('display') == 'block' ) {
jQuery('#contactSlide').slideUp(500);
} else {
jQuery('#contactSlide').slideDown(500);
// Handle scroll to top
jQuery('html, body').animate({scrollTop : 0},800);
}
})
You'll then need to give your new button an id="contactToggle2" in order for this to work. Again, this is just an example.
Related
I'm a pure student's beginner, right now I'm trying to create an adaptive menu for my project, but I need to change the color of my background because white on white is a little bit problematic.
What I tried is to create a script in order to add a class 'scroll' to my 'nav' when I'm scrolling down, and removed it when I'm going back to the top.
But as I said I'm a beginner, and it seems I did something wrong with either my script or my CSS.
Can you help me to understand how where I did something wrong?
Thanks for the help !
PS: Sorry for my english I did my best.
`https://codepen.io/Raz7/pen/zYKoJzY`
it's completly messed up, probably due to all the image I put in.
In your script tag you are using a JQuery Selector "$" but you did not add the JQuery library.
To keep things simple I will use the built-in querySelector from the document object and Vanilla Javascript.
The following code will do what you want:
let timeout;
window.addEventListener('scroll', function (e) {
// If there's a timer, cancel it
if (timeout) {
window.cancelAnimationFrame(timeout);
}
// Setup the new requestAnimationFrame()
timeout = window.requestAnimationFrame(function () {
// Run our scroll functions
let nav = document.querySelector('nav');
if (document.querySelector('header').getBoundingClientRect().top !== 0) {
nav.classList.add('scroll');
} else {
nav.classList.remove('scroll');
}
});
}, false);
To actually know what the distance to the top is you need a point of reference, in this script I used the header element as a point of reference since the header is relative to the body tag. If the header distance to top is not 0 then add the scroll class to the nav element else remove it. You can see also a timeout and requestAnimationFrame, this helps de-bouncing the scroll event.
Instead of using the JQuery Library, if you are a beginner I suggest learning about Vanilla Javascript and the DOM.
https://www.w3schools.com/js/js_htmldom.asp
I have created few forms and one pdf preview for this, whenever anyone will going to fill that form pdf preview will get updated with respect to it and after filling all the forms we can take pdf of it.
I want to be shown the particular section is getting updating (like changing the background color or underline it) on right side
when you giving the input on particular text box.
Please find the live code at http://ibus.proserindustries.com/
Posting this answer from the comment.
$("#propertytubelight").keyup(function() {
$("#propertytubelight1").text($("#propertytubelight").val());
document.querySelector("#propertytubelight1").scrollIntoView({ behaviour: "smooth", block: "nearest", inline: "start" });
});
This uses scrollIntoView method to scroll the input field with it's linked html element
I use the target selector to put and remove a class that shows and hides the navigation menu. The problem is that when a user uses the backbutton on the browser the menu states get messed up.
This is my css code
<style>
#buttons-container a.close-menu-primary{display: none;}
#wrap:target #mainmenu{display: block;}
#wrap:target #buttons-container a.open-menu-primary{display: none;}
#wrap:target #buttons-container a.close-menu-primary{display: block;}
</style>
buttons-container is a div with two buttons, open-menu-primary & close-menu-primary, that toggle each other on and off and show or hide the mainmenu.
The problem occurs when someone uses the back button. In that case it only toggles the button states between open and close-menu-primary, which are a burger and a close image.
You can check the live version here if you make the browser small enough or use a mobile device, screen size has to be smaller than (min-width: 768px) and (min-height: 558px) website with toggle by target selector
Hope someone can clear this up if it is possible to use target this way or if there better ways to get this affect without scripting please.
Thanks in advance!
The question is... when user presses the back button, do you want to go back one state of menu visibility (ie. hide it or unhide it), or do you want to go back one page?
I check your linked page http://www.rieon.nl. I think this is the problem:
I presume you want the user to go back one page, not just to hide the menu. Then, you need to change this piece of code
jQuery( document ).ready(function( $ ) {
$("#buttons-container a").click(function(){
$("nav").toggleClass("main");
});
});
and add either return false or e.preventDefault():
jQuery( document ).ready(function( $ ) {
$("#buttons-container a").click(function(e){
$("nav").toggleClass("main");
e.preventDefault(); // use either one
return false; // of these lines
});
});
The problem is that by clicking on the link on navigation button, browser executes the javascript handler that shows the menu AND navigates to link's href address (which is #wrap) and that creates a new step in its history, so that when user hits back button, browser just goes back to previous state (which is usually the same page but without #wrap). By adding return false (that's jQuery speciality) or calling preventDefault() on event object (that's standard JS), you cancel the navigation and leave only your own handler to be executed.
I'm making a simple WordPress theme and I wanted to include a jQuery Sidr into and I got that done properly, however the menu icon that pulls the slide-in sidebar disappears behind the sidebar leaving the user with no way to collapse the sidebar again.
The theme is far from complete (and I was working on it using an offline WP setup) but I put it up here temporarily for the sake of this question: http://sweven.vhbelvadi.com
The menu icon in question is on the top-right. I have given it top and right properties, floated it right, as well as given it a fixed position to make it stay there.
As I said, the design is far from complete, so take no notice of it, but once you click on the icon to slide out the sidebar area, the menu icon disappears.
I have tried giving it a z-index which works, putting the menu button on top and makes it accessible, but you cannot see it on the link above because I removed it; didn't like the look of it.
Basically, I'd like to know if there's any way of changing the attribute (focus, active don't seem to work) or do anything else so once the sidebar opens the menu icon slides out alongside it.
What is my solution?
Thanks.
Update:
Right now I'm using the following code at the link above:
$(document).ready(function(){
$('span.genericon').on('click', function(){
$('#simple-menu').sidr({side: "right"});
$('span.genericon').css({
right: "6.5em"
}, 500);
});
});
It works, but how would I return the menu icon to its original place?
The collapse button is there but when the sidebar opens, the button goes behind it, so you need to change the CSS based on whether sidebar is visible or hidden, so use a kind of toggle like below.
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Demo
Demo 2 (by Patrick)
When you trigger the jQuery to move the menu to make it slide out, use the jquery animate command to change the "right" property of this menu icon (.genericon.genericon-menu) to 270px.
So, something along the lines of this:
$(document).ready(function(){
$('.genericon.genericon-menu').on('click', function(){
$('#idofmenu').//code to move the menu out;
$('this').animate({
right: "270px"
}, 500);
});
});
And then vice versa for when the menu collapses.
This problem refers to the main (header) nav menu on THIS PAGE.
When any of the items in the "Services" drop-down submenu is clicked, I want the "Services" page to open (in the existing browser window) AND for a specific anchor tag element on the "Services" page to be in focus. I've achieved this OK. BUT, when the targetted anchor tag is in focus, I want it to also behave just like a manual mouse hover had been performed on its parent div, ie there should be a slide-down of text corresponding to the focussed element.
For a manual demo, go HERE and hover on one of the vertical list items - text will slide down to the right of the list.
HTML for the "Services" submenu link:
<li> collaborative law</li>
HTML for the targetted "a" tag and its parent div (ie "a" tag that should be in focus on "Services" page):
<div id="mylist1"><h3>Collaborative Solutions</h3></div>
Script to drive the hover behaviour of the focussed "a" tag and its parent div:
//fades in desired text after fading out whatever text is already displayed:
$(document).ready(function() {
$('#mylist1').mouseover(function() { //note first list item must be called mylist1 to avoid conflict with other code
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
//capture click events as well:
/* $('#mylist1').click(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});*/
//capture focus events on <a> as well:
$('#myTag1').focus(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
});
Note the main nav menu has been created using jquery, via a Dreamweaver extension.
What I have so far:
When the "Services" page opens, the correct target is in focus (as shown by the browser address bar). However, this focus is not triggering the expected text slide-down event. When I hit tab, the next list div goes into focus (as expected) & the appropriate text slide down occurs.
Am I hoping for too much? Have I misunderstood the limitations of 'in focus'" Will Mt Hotham have a killer snow season this year ?
Your sage advice is greatly welcomed!
Kirk
I'm not sure your use of "in focus" is quite what I expect... Having a fragment in the url doesn't necessarily give focus to that element, it just moves the display down to it. I assume the reason it works for tabbing is that tabbing does focus on elements and I assume it starts at the element that has been scrolled to.
What I'd suggest is breaking out your display script into a named function (so it can be used from elsewhere) and then on page load you can pull out the fragment from the url (eg #famLaw). Using that fragment you should be able to find the right element on the page and focus it.
It should be noted also that pulling the display text into a separate function has the advantage of consolidating your code - you are basically duplicating the code in the onfocus and onready events so breaking it out makes for easier maintenance and reuse. :)
P.S. I guess yes for Mt Hotham. I'd never heard of it before but I'm going to be optimistic.