I'm using a .fadeToggle menu on my site.
I'm having some buttons that are showing a different div when clicking on them.
Everything's correct and you can be navigating on it but I want to avoid user to be clicking on the same button and close the info (it makes the screen be completely blank).
If I'm using the e.stopPropagation() I'm not able to navigate through it.
Thanks in advance.
HTML:
</div><div id="toggleContainer2">
<p><p>This is not an advertising platform, all selected agencies are more or less a subjective choice. The author reserves the right not to be responsible for the topicality, correctness, completeness or quality of the information provided. Liability claims regarding damage caused by the use of any information provided, including any kind of information which is incomplete or incorrect, will therefore be rejected. </p>
<p>All offers are not-binding and without obligation. Parts of the pages or the complete publication including all offers and information might be extended, changed or partly or completely deleted by the author without separate announcement.</p></p>
</div>
...
<a class="btn" id="trigger2">Disclaimer</a>
JS:
<script>
$(document).ready(function() {
// toggle advanced search
$("#toggleContainer2").hide();
$("#trigger2").click(function() {
$("#toggleContainer2").fadeToggle(1500);
$("#toggleContainer").hide();
});
});
</script>
Edit: I've been re-read your post, your problem is you didn't understand how .fadeToggle works, because what you describe is exactly what it is intented for.
What you need is to read that : fadeIn because it's the function that you need.
Older answer
What you need is to change the way you're tracking the target of the event.
Let say your dropdown as the class .dd and your button class is .menu_b, you will got something like this
$('body').on('click','.menu_b',function(e){
if($(e.target).hasClass('menu_b')) {
$('.dd').fadeToggle();
}
});
Related
(Apologies if I am not using correct terminology--I am a student and this question falls outside of what we are learning about in terms of having a curated formal reading/resources list to refer to!)
I am working on a final project (assignment=PHP site with a section that searches an SQL database and returns results in a table; have been learning Bootstrap to try to style the project site). I've got a lot finally working that I had been stuck on (thanks to others posting their questions/issues on this site, actually)!
However, I'm having trouble figuring out how to best search for resources on a problem I am having with displaying search results on my project site: Right now, when a user enters a search term and clicks the "search" button, they are taken back to the top of the web page and then have to scroll back down to see the search results.
Below is what I've tried in terms of finding appropriate reading:
I have Googled terms related to displaying search results, and come up with a lot of usability guidance (which was useful and I bookmarked to read later), but no technical details (or none that I recognized).
"how to get search results to return to search bar in page"
"how to get search results to return to specific place in page"
"displaying search results"
"displaying search results + load"
I both scanned the "How To" side menu and searched the W3 site: https://www.w3schools.com/howto/default.asp
"search results"
I searched similar terms as above here
Based on the above results I've gone through, here are my questions for moving forward:
It seems like this is something I will have to use JavaScript for--is this correct?
Are there other search terms that would be useful to try? (e.g., I'm going to start reading about "focus" now)
Thank you so much for any guidance in terms of narrowing down my search options!!!
UPDATE!
What worked:
Adding a form action attribute to the "search" and "clear" buttons, and setting those attributes to load to the anchor for the search section of the page!!!
How I found it:
I had been searching for how to call multiple actions on a button in javascript (so I could have both the focus action and the clear action, e.g., on one of the buttons), and one result was this page about "multiple form submit for different form action", which led me to search for more about formaction, which led me to https://www.geeksforgeeks.org/html-button-formaction-attribute/, and ultimately the w3schools page.
Thanks again for setting me down the right path, Ken!
I hope this gives you an idea that will help you figure out what you are trying to achieve.
function getFocus() {
document.getElementById("mySearch").focus();
}
function loseFocus() {
document.getElementById("btn").focus();
}
.mySearch{margin-top: 100%;}
<!DOCTYPE html>
<html>
<body>
<button type="button" id="btn" onclick="getFocus()">Get focus</button>
<p id="p">Try to click this</p>
<button type="button" onclick="loseFocus()">Lose focus</button>
<input type="search" class="mySearch" id="mySearch" placeholder="Search field..">
</body>
</html>
I've created a widget in Webflow that works but the UX design isn't the greatest and in order for me to create a better experience I need help with some js. Here's a little overview of the widget so you see what I mean:
The goal of the widget is to allow users to
a) browse our product categories and continue to view product options
b) view the aesthetic differences between our offered building types (prefab and container) while also allowing the user to compare building types for each category by following the "compare" CTA
Gif of Widget
We have 5 product categories in 2 different building types: prefab and container. I have 2 tabs to switch between the building types and then inside of those tabs content, I have 5 category tabs: Living space, portable offices, utility, recreation, and storage. Those tabs' contents are the image and CTAs on the left.
My problem is the user's selected product category doesn't mirror over to the other building type. For example if you've selected office spaces on the prefab tab and switch over to the container tab, a completely different product category will be selected.
How it Should work
I was able to mirror the selected prefab product category over to the container tab using this basic logic:
<script>
//prefab
$(document).ready(function() {
$('.livingprefab').click(function() {
$(this).addClass('current');
$('.livingcontainer').trigger('tap');
});
$('.storageprefab').click(function() {
$(this).addClass('current');
$('.storagecontainer').trigger('tap');
});
$('.utilityprefab').click(function() {
$(this).addClass('current');
$('.utilitycontainer').trigger('tap');
});
$('.officeprefab').click(function() {
$(this).addClass('current');
$('.officecontainer').trigger('tap');
});
$('.recprefab').click(function() {
$(this).addClass('current');
$('.reccontainer').trigger('tap');
});
});
</script>
Now, this works but when I try to add the opposite (selected products on the container tab mirror to the prefab side) everything breaks. Why is this? How can I fix it?
P.S. This is literally my second time touching js so the code is probably far from best practice. I'm a UX designer trying to branch out into development so if you have any advice I'd love to read it.
Edit: Here's my Webflow read-only link
Your code above makes an automatic click/tap occur on a container product just after a click occurs on the corresponding prefab product using the trigger method.
If you replicate this code in reverse as you suggest, an automatic click/tap will also occur on a prefab product just after a click on the corresponding container product. So— together these would create a never-ending recursive loop of clicks and I would imagine that everything would break.
Instead of a click on one product triggering an automatic click/tap on the corresponding product, I suggest you use the click/tap events on a pair of products only to make changes directly to the classes on the relevant elements. I would avoid triggering additional click/tap events and in doing so you will avoid such recursive problems. And, as it looks like you are toggling the same class on the pair of corresponding products, you can apply the same function to both to avoid duplicating code.
It's hard to be precise without seeing the rest of your code and the HTML, but something like:
function makeLivingCurrent() {
$('.livingprefab').addClass('current');
$('.livingcurrent').addClass('current');
}
$('.livingprefab, .livingcurrent').click( makeLivingCurrent )
And so on.
Please, help! I have video.js v4.12.11 and videojs-vast-vpaid plugin. I need control buttons like "skip ad", "go to site", "close ad". I checked xml - they have such information. For example
<Extension type="skipTime"><![CDATA[00:05]]></Extension>
<Extension type="skipTime2"><![CDATA[00:05]]></Extension>
<Extension type="linkTxt"><![CDATA[перейти на сайт рекламодателя]]></Extension>
<Extension type="isClickable"><![CDATA[1]]></Extension>
And also I have such code:
"plugins": {
'ads-setup': {
"adsEnabled": true,
"url": here is url
}
}
So ad is shown. But advertiser needs these buttons. I tried to find is this plugin has such options but failed =(
Also I found it has different trigger like vast.adSkip but how can I skip this video?!
Oh yes! It is preroll video
I was sure that it has some little parameter and when I set it "true" everything will work like I want. I was wroooong. They just don't have such functions. I had to add it for myself. Also the part of my problem was that this plugin adds skip button if I get vast of the 3rd version by HTML. But adfox works only with v.2 and send additional info in extention parameteres
This issue helped me
https://github.com/MailOnline/videojs-vast-vpaid/issues/56 I
changed functions like indieveed did.
After that I changed and modified and added many functions.
add close button
add "go to site" button
get links for sending statistics from additional (adfoxish) parameteres "Extention" and send events by these links
My thoughts about easy way was so untrue. Next time when I get more time I'll try to change the plugin
I am very very new to Javascript so i do apologise if its simple.
On my site I have lots of pages with lots of information on them, the info is split into sections in an accordion format.
I want to be able to track if someone engages with the expandable sections but I only need to know one click/Event per user at this moment in time.
I just need to know where i would put my code and what javascript i would need to write in order to track if someone clicks on a section then stops tracking once they have clicked.
In my head I am thinking of having script per expandable section but if someone clicks on one, how will the other sections know not to track any more.
An example is http://www.disabledgo.com/access-guide/tower-hamlets-council/tower-of-london
I hope someone is able to help.
Thanks
If you want to only track on thing you can add a Boolean value to a variable inside an if statement and test that for each event.
So in basic language
lets say you have a button.
<button id='b1'>my button<button>
if you want to only track one of the button clicks you can do something like this. Note: I used jQuery so you need to link to the api in your head tags.
var boolval = true;
$('#b1').click(function () {
if (boolval) {
//alert('worked!'); for debugging
_gaq.push(['category', 'action','lable','opt_interaction','value'])
boolval = false;
}
});
I added an if statement based on the variable boolval that I set to false after the first click. Then when you click again it checks it and comes up false and does not fire the function.
Here is a working jsfiddle http://jsfiddle.net/nicomiceli/L2Efh/
You can do this for your accordion menu. Set the event listener to your class and after the first click make something false so if they try it again it won't fire.
Let me know if you have any questions.
Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.
// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..
The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.
You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps