I'm new to jQuery and I have some issues to stop the scrolling effect. For context, I use this code for hide and show some section on button click.
This is my code:
jQuery(function($) {
$('.rv_button1').click(function(e) {
e.preventDefault();
$("#reveal1").slideToggle();
$('.rv_button1').toggleClass('opened closed');
});
});
I use wordpress with divi theme, the html is not really clear but this part is where my jQuery function is made for (sorry for my English though)
<div class="et_pb_button_module_wrapper et_pb_button_0_wrapper et_pb_button_alignment_center et_pb_module ">
<a class="et_pb_button et_pb_button_0 rv_button et_pb_bg_layout_light opened" href="http://valerieb30.sg-host.com/notre-equipe/#reveal">Québec</a>
</div>
<div id="reveal" class="et_pb_row et_pb_row_1 et_pb_equal_columns et_pb_gutters2" style="display: block;">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough et-last-child">
<div class="et_pb_module et_pb_text et_pb_text_0 et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner"><h2>Cuisinistes</h2></div>
</div>
<div class="et_pb_module et_pb_de_mach_archive_loop et_pb_de_mach_archive_loop_0 main-loop loadmore-align- grid-layout-grid main-archive-loop
Related
Im trying to make Links inside .newTP clickable, there is something in my Jquery that is not working. Its my first try with Jquery and I am trying to use this and adapt it to my code
<div class="newTablonJS">
<div class="newTP TPB1 newTPActive">
<div class="B1Row1">
Índice
Editar Perfil
</div></div>
<div class="newTP TPB2">
<div class="B2Col1"></div>
<div class="B2Col2"></div>
</div>
<div class="newTP TPB3"></div>
<div class="newTP TPB4"></div>
</div>
And here the Jquery
$(document).on('click', '.newTP', function(e) {
e.preventDefault();
var $el = $(this);
$el.addClass("newTPActive").siblings().removeClass('newTPActive');
$('.newTablonJS').load($el.find('a').attr('href')); });
I have multiple divs with id='title'.
When that div is hovered over I want a hidden div with id="source" to appear.
I am using the following code but only the first div with id='title' on the page works.
<!-- Show Source / Date on mouse hover -->
<script>
$(document).ready(function(){
$("#title").mouseenter(function(){
$("#source").fadeIn( 200 );
});
$("#title").mouseleave(function(){
$("#source").fadeOut( 200 );
});
});
</script>
HTML Example:
<div id="title" class="col-md-3">
<div id="source" style="display:none">Hidden Text</div>
</div>
<div id="title" class="col-md-3">
<div id="source" style="display:none">Hidden Text</div>
</div>
<div id="title" class="col-md-3">
<div id="source" style="display:none">Hidden Text</div>
</div>
Use classes instead of IDs
use .find() to search for descendants of an element
jQuery(function($) { // DOM ready and $ alias in scope
$(".title").on({
mouseenter() {
$(this).find(".source").fadeIn(200);
},
mouseleave() {
$(this).find(".source").fadeOut(200);
}
});
});
.title {
display: flex;
}
/* Utility classe */
.u-none {
display: none;
}
<div class="title col-md-3">
TITLE 1
<div class="source u-none">Visible Text</div>
</div>
<div class="title col-md-3">
TITLE 2
<div class="source u-none">Hidden Text</div>
</div>
<div class="title col-md-3">
TITLE 3
<div class="source u-none">Hidden Text</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Hello Δce Let's start by modifying the source code to use classes for you to pick. This helps us describe the functionality and allow the ID's to serve their purpose.
we'll take your
<div class="col-md-3 show-source-on-hover">
<div class="source" style="display:none">Hidden Text</div>
</div>
<div class="col-md-3 show-source-on-hover">
<div class="source" style="display:none">Hidden Text</div>
</div>
<div class="col-md-3 show-source-on-hover">
<div class="source" style="display:none">Hidden Text</div>
</div>
and we can update the jQuery code
<script>
$(function() {
$(".show-source-on-hover")
.mouseenter(function() {
$(this).find('.source').fadeIn( 200 );
})
.mouseleave(function() {
$(this).find('.source').fadeOut( 200 );
});
});
</script>
You can see here there's the use of this wrapped in the $() jquery object function. and the new use of .find to get get the correct source class.
For a working demo please see the following link: https://codepen.io/jessycormier/pen/GRmaaEb
Note: your use of ID's should change and always try and be unique like others have suggested. MDN (Mozilla Developer Network) has some great documentation on the standards of HTML, CSS, and JavaScript which can help give you.
Also, in the demo I've given your column divs some default size otherwise there is nothing to trigger the mouse over events. Good luck and happy coding 🚀
IDs are IDENTIFIERS. What that means is that there can only be one per document. Classes are not unique, so you can use them.
✅ $(".title")
❌ $("#title")
I'm trying to use Fullpage.js. Here is my script:
<div id="fullpage" style="margin-top: 55px">
<div class="section" id="first" style="background-color: red">Some section - Home</div>
<div class="section" id="services" style="background-color: blue">Some section - Services</div>
<div class="section" id="why" style="background-color: green">Some section - Why</div>
<div class="section" id="portofolio" style="background-color: red">Some section - Portofolio</div>
<div class="section" id="price" style="background-color: blue">Some section - Price</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
menu: '#navbarNav',
css3: true,
scrollingSpeed: 1000
});
});
</script>
The problem is, there is no slide effect in my HTML page. Any solutions? I don't see any errors in my browser console.
UPDATE
There is a second problem, When I scroll to random section then I click the menu, the anchor is not working, I mean it keeps at the section which I scroll.
You need to define your anchors in your script, like this:
$(document).ready(function() {
$('#fullpage').fullpage({
menu: '#navbarNav',
css3: true,
scrollingSpeed: 1000,
anchors:['first, 'secondPage', 'why', 'portofolio', 'price']
});
};
Source: https://github.com/alvarotrigo/fullPage.js#fullpagejs
please, could you insert your javascript code inside the $(document).ready() to be sure that it is ready to execute. In your case, it should be something like:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
menu: '#navbarNav',
css3: true,
scrollingSpeed: 1000
});
};
</script>
Hope this can resolve your problem.
Thank you
You need to write the ID on href anchor attribute like this
<ul id=#menu>
<li data-menuanchor="first" class="active">
First
</li>
<li data-menuanchor="services" class="active">
Services
</li>
</ul>
I'm using iScroll for a horizontal, fixed position menu. It works great, however I'm unable to vertically scroll the rest of the page in a mobile browser. It works fine in a pc/mac resized browser window, just not on mobile. I've tried Safari on iPhone and Chrome and Dolphin on Android.
Any ideas how I can get the page to scroll too?
I've played with the vScroll, hScroll, etc options but haven't been able to solve the issue:
<nav id="mainNav">
<ul class="pagesIcons bottom">
<li style="background-color:#000000" class="active selected current youarehere">
<a href="#" class="inner">
<div class="buttonIcon">
<img src="/content/icons/002.png">
</div>
<div class="buttonText">
Homepage
</div>
</a>
</li>
<li style="background-color:#383838" class="">
<a href="#" class="inner">
<div class="buttonIcon">
<img src="/content/icons/002.png">
</div>
<div class="buttonText">
Gallery
</div>
</a>
</li>
<li style="background-color:#5c5c5c" class="">
<a href="#" class="inner">
<div class="buttonIcon">
<img src="/content/icons/004.png">
</div>
<div class="buttonText">
Events
</div>
</a>
</li>
........
</ul>
</nav>
I'm initialising it with:
var myScroll;
function loaded() {
myScroll = new iScroll('mainNav', {
bounce: false
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
Solved. I just had to remove:
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
Pretty obvious. This was preventing the default event on 'touchmove'. Durrrrrrr
You can fix this issue by applying this jquery, In place of ClassName you have to add the name of wrapper class in which you want scrolling, If you still face problem let me know I will try to help more.
$('.ClassName').bind('touchmove', function(e){
e.stopPropagation();
});
I'm new to Blogger, and HTML and am trying to set up a fashion-blogging website on Blogger.
I've been successful in making the header image static (that is, doesn't move when scrolling through posts), but unfortunately it isn't aligned at the very top of the website. This makes it look very odd as content disappears as it scrolls under the header image, and reappears briefly as it scrolls between the header image and top of page.
I've looked into some basic HTML, but there is a huge jump from basic HTML to the HTML I see when I try to edit HTML directly on my Blogger website. I just want the header image to be aligned at the very top.
Can anyone help? Anything is appreciated.
Add the css top:0 to the DIV with ID "header-outer"
Plus
Why do you have so much unnecessary markup? You could replace all of this:
<div class="header-outer">
<div class="header-cap-top cap-top">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
<div class="fauxborder-left header-fauxborder-left">
<div class="fauxborder-right header-fauxborder-right"></div>
<div class="region-inner header-inner">
<div id="header" class="header section"><div id="Header1" class="widget Header">
<div id="header-inner">
<a style="display: block" href="http://monsemble.blogspot.ca/">
<img width="833px; " height="216px; " style="display: block" src="http://2.bp.blogspot.com/-91QDCMg_EsU/UcsYVdMvLQI/AAAAAAAAACw/Oa727KfuuBk/s1600/header.jpg" id="Header1_headerimg" alt="MONSEMBLE">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="header-cap-bottom cap-bottom">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
</div>
With:
<div class="header-outer">
<a style="display: block" href="http://monsemble.blogspot.ca/">
<img width="833px; " height="216px; " style="display: block" src="http://2.bp.blogspot.com/-91QDCMg_EsU/UcsYVdMvLQI/AAAAAAAAACw/Oa727KfuuBk/s1600/header.jpg" id="Header1_headerimg" alt="MONSEMBLE">
</a>
</div>
I faced something similar on my Blogger blog and I noticed that inspite of me switching off the navbar that comes with the Blogger website, in the the HTML code there was still a division on the top of the page for the navbar. I removed it from the template and was able to move the header image to the top of the webpage.
I removed this section of the code -
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
<b:includable id='main'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes && gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
url: 'https://www.blogger.com/navbar.g?targetBlogID\0752197236978911214706\46blogName\75MahekMody.com\46publishMode\75PUBLISH_MODE_HOSTED\46navbarType\75DISABLED\46layoutType\75LAYOUTS\46searchRoot\75http://www.mahekmody.com/search\46blogLocale\75en\46v\0752\46homepageUrl\75http://www.mahekmody.com/\46vt\0753008633957882384298',
where: document.getElementById("navbar-iframe-container"),
id: "navbar-iframe"
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>
</b:section>