It will work in the OP’s original codepen.
var myElement = $('.sample-header');
$(window).on('scroll', function () {
var st = $(this).scrollTop();
myElement.css({
'opacity': 1 - st / 600
});
});
2 Likes
I also posted on SO
This solution was proposed →
That code should call preventDefault() on the event object it receives. (You may well also want to call stopPropagation() on it, if there’s a click handler on an ancestor element that’s getting triggered inappropriately.)
so I tried this in my code:
$("a").click(function(event){
event.preventDefault();
});
$("a").click(function(event){
event.stopPropagation();
});
I also tried it on the DIV ID element.
$("#target-content").click(function(event){
event.preventDefault();
});
$("#target-content").click(function(event){
event.stopPropagation();
});
But nothing worked. what could be the additional suggestions so that I can try fixing this.
I already gave you the answer in post #16 if we are still talking about the same issue. Just remove the menu-item class from that element and it will work.
Is it not possible for you to remove that class? It will be much easier than writing another script to trap the anchor and prevent the scrolling behaviour that interferes with the modal.
I can confirm that without the class in place the modal works fine as I have had it running locally.
2 Likes
Try this in the functions.php of your child theme:
add_filter('nav_menu_css_class', 'codeispoetry_delete_class_menu', 10, 4);
function codeispoetry_delete_class_menu($classes, $item, $args) {
return array();
}
Probably this will delete all menu classes.
I tried deleting them in browser, but that doesnt solve the issue.
1 Like
Yes! It deleted the class, and also the problem got fixed.
This worked like a charm.
@PaulOB How did you troubleshoot? How did you got the clue that the classes were the evils?
20 years of practice 
It was clear to me that the link had been hijacked by one of your scripts and I soon found In your scroll routine that you have the class listed. You can see it here:
function USScroll(options) {
var defaults = {
attachOnInit: '.menu-item a[href*="#"], .menu-item[href*="#"], etc....
Any element you apply that class to will get the scrolling effect.
You didn’t need to apply that class to everything unless you wanted it to scroll somewhere. What you should have done is create a unique class called (scroll-link or similar) or similar and just use that for scrolling targets.
Of course I realise that you are using Wordpress so things are not as straight forward as they seem but when using a platform you need to get a handle on all these things There will always be conflicts when using multiple scripts and plugins unless you are very careful with their use. I don’t have any knowledge of WordPress as its something I avoid simply because I don’t want to have to spend days learning it;)
2 Likes
@codeispoetry solution worked and that function eliminates the class, but with that done the header menu disappears.
If I am not asking too much from the members of this website can someone help me to fix it some other way TJ Crowder has explained here.
thank you so much in advance.
I think you should ask TJ Crowder to help as it was his suggestion. It is generally considered bad etiquette to have a conversation running on two different forums.
It seems to me your problem is a lack of understanding how Wordpress works rather than a specific coding issue. I know wordpress can be awkward to manage.
If you can put your page back together with the menu class back in place then I will take another look and maybe you can trigger the modal without using :target but add a class with js instead. Post a link to the site when you have it back to as it was before you removed the class.
5 Likes
OFF TOPIC →
The reason for all this disaster is many theme builder in order to increase selling point use page builders giving those drag and drop features and they seem fantastic to the layman - the one who is not the knower of the code.
But they destroy the simplicity and beauty of the WordPress. After 5.0 WP release, WordPress has started to kill all this nonsense by introducing block system.
@Novice is using some theme that uses such feature that has hijacked the core features that comes bundled with the WordPress installation.
so it is not the lack of knowledge, but the complicacy is created by over ambitious theme developers.
3 Likes
Sorry for that will take care in the future.
this is the whole code sir:
<div id="target-content">
<a href="#" class="close"></a>
<div id="target-inner">
<h2>Contact Us</h2>
<?php echo do_shortcode('[contact-form-7 id="467" title="popup"]'); ?>
</div>
</div>
<script type="text/javascript">
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("target-content");
popup.classList.toggle("show");
}
</script>
<style media="screen">
#button {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
padding: 16px 24px;
border-radius: 1px;
text-decoration: none;
font-size: 24px;
display: block;
color: white;
background-color: #34495E;
text-align: center;
font-weight: 100;
-webkit-transition: box-shadow 200ms;
transition: box-shadow 200ms;
border-radius: 4px;
}
#button:hover { box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2); }
/*
#target-content {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#target-content:target {
pointer-events: all;
opacity: 1;
}
#target-content #target-inner {
position: absolute;
display: block;
padding: 48px;
line-height: 1.8;
max-width: 700px;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
background: white;
color: #34495E;
}
*/
#target-content {
position: fixed;
top:0;
left:0;
opacity: 0;
z-index:-1;
height:0;
width:0;
overflow:hidden;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#target-content:target {
opacity: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
height:auto;
width:auto;
overflow:visible;
z-index:999;
}
#target-content #target-inner {
position: absolute;
overflow:auto;
display: block;
padding: 48px;
line-height: 1.8;
max-width: 700px;
max-height:100vh;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
background: white;
color: #34495E;
}
#target-content #target-inner h2 { margin-top: 0; }
#target-content #target-inner code { font-weight: bold; }
#target-content a.close {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #34495E;
opacity: 0.5;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#target-content a.close:hover { opacity: 0.4; }
@media screen and (max-width:700px){
#target-content #target-inner {width:95%;}
}
</style>
Would it be possible if the pop up can load not just on click, but on the page load itself. If that is possible than I have found an alternative solution.
I have put the menu item back by the way.
Still seems to be the version without the menu-item class added?
I still have the old local version I copied so I’ve based the following fixes on the old code. As the problem with the popup only seems to be the scroll routine triggered by the menu-item classname then we can use a little bit of jquery to remove the class name from that last menu item in the footer only.
e.g.
$('#menu-footer-menu li:last-child a,#menu-footer-menu li:last-child').removeClass('menu-item');
I put it here in the revised JS that I gave you previously.
<script>
(function($) {
function parallax_height() {
var scroll_top = $(this).scrollTop();
//var sample_section_top = $(".sample-section").offset().top;
var header_height = $(".sample-header-section").outerHeight();
/*
$(".sample-section").css({
"margin-top": header_height
});
*/
$(".sample-header").css({
height: header_height - scroll_top
});
if (scroll_top > 100) {
$(".sample-header").fadeOut();
}
else {
$(".sample-header").fadeIn();
}
}
parallax_height();
$(window).scroll(function() {
parallax_height();
});
$(window).resize(function() {
parallax_height();
});
/* added this*/
$('#menu-footer-menu li:last-child a,#menu-footer-menu li:last-child').removeClass('menu-item');
})(jQuery);
</script>
Note that the above script should be placed after the target-content div in the html. Note also that i commented out some js that seemed to be giving an error as you don’t have a .sample-section in your html.
If you have changed the html since the original version then I would need to see what you have now if the above doesn’t work. As I said the link above is the version without the menu-item class added and does not show a top menu.
1 Like
This is the code sir in the footer.php =
Please see sir header menu is back now I have deleted the function.
Sir,
Can this be also possible =
Yes move the script after the target-content html or it will not find it.
<div id="target-content"> <a href="#" class="close"></a>
<div id="target-inner">
<!-- <h2>Modal Heading</h2> -->
<div role="form" class="wpcf7" id="wpcf7-f331-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/#wpcf7-f331-o1" method="post" class="wpcf7-form" novalidate>
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="331" />
<input type="hidden" name="_wpcf7_version" value="5.0.3" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f331-o1" />
<input type="hidden" name="_wpcf7_container_post" value="0" />
</div>
<p>
<label> Your Name (required)<br />
<span class="wpcf7-form-control-wrap your-name">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" />
</span> </label>
</p>
<p>
<label> Your Email (required)<br />
<span class="wpcf7-form-control-wrap your-email">
<input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" />
</span> </label>
</p>
<p>
<label> Subject<br />
<span class="wpcf7-form-control-wrap your-subject">
<input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" />
</span> </label>
</p>
<p>
<label> Your Message<br />
<span class="wpcf7-form-control-wrap your-message">
<textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea>
</span> </label>
</p>
<p>
<input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" />
</p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
</div>
</div>
</div>
<script>
(function($) {
function parallax_height() {
var scroll_top = $(this).scrollTop();
// var sample_section_top = $(".sample-section").offset().top;
var header_height = $(".sample-header-section").outerHeight();
$(".sample-section").css({
"margin-top": header_height
});
/*
$(".sample-header").css({
height: header_height - scroll_top
});
*/
if (scroll_top > 100) {
$(".sample-header").fadeOut();
console.log('test1');
}
else {
$(".sample-header").fadeIn();
console.log('test2..');
}
}
parallax_height();
$(window).scroll(function() {
parallax_height();
});
$(window).resize(function() {
parallax_height();
});
/* added this*/
$('#menu-footer-menu li:last-child a,#menu-footer-menu li:last-child').removeClass('menu-item');
})(jQuery);
</script>
CSS is controlling the popup using :target. If you want it visible by default you would need to use some js to add a class and then duplicate the target routine in js instead.
People hate popups on page load so I would avoid it if possible.
1 Like
sir, now every things seems to be working fine, but one issue has appeared in the parallax page. The ||'x image suddenly disappears while moving upward despite the fact that the JQuery/JS code is the same. Previously when we discussed it last time everything was working fine.
That’s because the fade-out routine you added is now working properly.
function parallax_height() {
var scroll_top = $(this).scrollTop();
//var sample_section_top = $(".sample-section").offset().top;
var header_height = $(".sample-header-section").outerHeight();
/*
$(".sample-section").css({
"margin-top": header_height
});
*/
$(".sample-header").css({
height: header_height - scroll_top
});
if (scroll_top > 100) {
$(".sample-header").fadeOut();
}
else {
$(".sample-header").fadeIn();
}
}
parallax_height();
$(window).scroll(function() {
parallax_height();
});
$(window).resize(function() {
parallax_height();
});
Remove the above code if you don’t want it to fade out . Don’t remove the snippet I gave you though. The resulting code would look like this:
(function($) {
/* added this*/
$('#menu-footer-menu li:last-child a,#menu-footer-menu li:last-child').removeClass('menu-item');
})(jQuery);
The following code is doing nothing so can be removed also:
<script type="text/javascript">
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("target-content");
popup.classList.toggle("show");
}
var myElement = $('.sample-header');
$("a #target-content").click(function(event){
event.preventDefault();
});
$("a #target-content").click(function(event){
event.stopPropagation();
});
</script>
1 Like
Sir, i do not have words today to thank you. You have get me out of trouble so easily. Thank you so much for all your support and guidance.
can you also guide me what should I search on internet so that I can try making this pop up on the page load.
I dont know JS probably this will be doable by JQuery somehow.
Probably a question best for the JS forum but you could try updating the snippet I gave you to this.
<script>
(function($) {
/* added this*/
$('#menu-footer-menu li:last-child a,#menu-footer-menu li:last-child').removeClass('menu-item');
$(document).ready(function(){
var href = $('#menu-footer-menu a[href="#target-content"]' ).attr('href');
window.location.href = href;
});
})(jQuery);
</script>
1 Like
Sir,
I was also trying to put a delay in this:
$(document).ready(function(){
var href = $('#menu-footer-menu a[href="#target-content"]' ).delay(1500).attr('href');
window.location.href = href;
});
But It didn’t worked. If possible, and If I am not spamming this post with too much JQuery can you please help me to troubleshoot this. Thanks.
Try this:
<script>
(function($) {
/* added this*/
$('#menu-footer-menu li:last-child a,#menu-footer-menu li:last-child').removeClass('menu-item');
$(document).ready(function(){
var href = $('#menu-footer-menu a[href="#target-content"]' ).attr('href');
setTimeout(
function()
{
window.location.href = href;
}, 5000);
});
})(jQuery);
</script>
2 Likes