this is my first StackOverflow post. So I hope my question fits the standards.
I'm working on creating my own website using the YAML CSS Framework. ( http://www.yaml.de/docs/index.html )
On that page, they have it so as you scroll, the navigation menu stays at the top of the screen.
When I downloaded the framework, I found the below code in their domscript.js file.
So I understand that they added a class so it would stick.
What I would like to do is have a second menu of the same kind with different links right below it.
I copied and pasted the html code for the menu right below it and a second one did appear.
But as I scroll down, only the first one stays.
Any ideas on how I can get the second one to stay as well?
if (hOffset < top) {
if (nav.data(stickyClass) !== true) {
nav.addClass(stickyClass).data(stickyClass,true);
}
} else {
if (nav.data(stickyClass) !== false) {
nav.removeClass(stickyClass).data(stickyClass,false);
}
}
Yes, because an ID can use only once. If you want to this type of menu you have to create another id & copy the .js file & change the ID in that .js file.
I think this will work.
Related
I have these divs that I can toggle onclick to scale larger one at a time. It works perfectly except that once one is enlarged, one is always enlarged. I am using toggleOpen for this. I am looking to be able to make it so that it can do what it already does, but then onclick of the enlarged div have it go back to its original size without having to toggle with another div. In other words, I need a way to make the page go back to a state where all the divs are in original size. I have tried else statements to no avail as well as adding another function to remove class. I only want a js solution - no jquery or anything else please. Here is the JS portion of it.
const event = document.querySelectorAll('.eventsBorder')
function toggleOpen() {
let opened = document.getElementsByClassName('large')[0];
if(opened!=undefined)
opened.classList.toggle('large');
this.classList.toggle('large');
}
event.forEach(eventsBorder => eventsBorder.addEventListener('click', toggleOpen));
Here is my codepen
Thanks in advance for any help!
The opened variable gives you back a list of all the HTML elements which have the large class, and when you click again on an already enlarged div that automatically satisfied this criteria. So, what happens is that if you click on the same item twice, your toggleOpen function first removes the large class from that item and then adds it again because of the following line in your code-
this.classList.toggle('large');
The best way to achieve what you want would be to make sure that in addition to opened not being undefined, you should also make sure opened is not the same item as the one you clicked on. You can accomplish that using-
if(opened != undefined && opened != this)
Here is a link to the updated codepen to see it in action.
So it looks like you are using querySelectorAll to select all elements with the class "large", then you're toggling the class. If you toggle the class, it will no longer be a part of that query selection, as it no longer has that class applied, so it will not be able to remove it.
const event = document.querySelectorAll('.eventsBorder')
event.forEach(eventsBorder =>
eventsBorder.onclick = () =>
eventsBorder.classList.toggle('large'));
This seems to accomplish what you'd like.
I am working on a website in which I want to hide rectangular footer panel showing at the bottom of a website.
It should work in a way when the website comes in edit mode, the rectangular panel should be hidden and when it comes in non edit mode, the rectangular panel should be visible.
The JS code for which is being called when the section comes in edit mode is:
toggleEdit: function(position) {
const self = this;
if (name == undef) {
return self;
}
self[name.dataset.edit != position ? "doEdit" : "undoEdit"](position);
return self;
},
The website comes in the edit mode when the value of position is either "hello" or "world".
Problem Statement:
I am wondering what Javascript I need to add above so that when the value of position is either "hello" or "world", it should the hide everything displayed through the following html (which is actually a footer panel):
<div class="hide-bar">
<!–– and the comment closes with ––>
</div>
Basically, you have to manipulate the DOM. The answer to your question, is really well explained at this question: Show/hide 'div' using JavaScript. Here, the answer provides a way to do it by using JavaScript.
If you want to do it by using a framework or library such as ReactJS you have to tell, what technology you are using.
I am using a third-party survey software (Qualtrics). I have a survey question, and the answer is a drop-down menu. You can see this at the bottom of the page at alsquest.org and in the image below.
I want to center the drop down menu under the question text. (Failing that, another option would be to indent the drop-down menu so that it aligns with the rest of the text; I believe the current indent is 120px.)
I have access to the HTML for the question text, but the only way I can modify the answer drop-down menu is to use JavaScript. Qualtrics allows you to add JavaScript, but I am not a coder so I have no idea what code to use. This is the code shell that they provide for the JavaScript:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your JavaScript Here*/
});
My question is, what JavaScript code do I put there to center (or indent) the drop-down menu? Any suggestions or questions would be appreciated.
To do this in JavaScript, you need to 'get' the HTML element from the page, and then set the CSS style. You could do it like this:
var dropDown = document.getElementById("the-dropdown");
dropDown.className = "dropdown-css-class";
Then in a CSS file included on the HTML page you would have to define the class:
.dropdown-css-class {
margin-left: 120px;
}
or like this:
var dropDown = document.getElementById("the-dropdown");
dropDown.style["margin-left"] = "120px";
Without seeing the HTML I can only guess at how you would center or otherwise align the drop down, but this should get you going. You can experiment with jsfiddle.
I guess you can change css by jquery like this:
First you need to find id or class of that dropdown menu. After that you can add jquery code to the code like this:
$("HERE GO ID OR CLASS FROM THAT ELEMENT").css("align","center");
or what ever you want for css.
But if you have more dropdown menus. You should get class and say
$("CLASS NAME").on('click', function(){
and here get id from clicked one and then use above code for changing css
});
This is best done with CSS. In your case, you can add the following code in the "Custom CSS" section of the Advanced Look and Feel Settings:
#QID2 > div.Inner.BorderColor.DL > div > fieldset > div {
text-align: center !important;
}
Note that this will only work for that specific dropdown in that specific survey (Nothing else will be affected). If you change your survey theme it may no longer work for you so watch out for that.
As an FYI I worked in Qualtrics Support for a year.
So on load of document I hide all my description divs, then when hovering over I want the divs to display the text below, however its not allocating space for the text to be there. It gets stuck underneath my footer. However if I tried the invert aka, show it on start and hide it on hover it works perfectly as intended, making space when it reshows itself.
The main part of my code is here
http://www.hastebin.com/yilinademe.xml
http://gurucraft.co.uk/media.php If you look at the thumbnail lower on the page, when you hover over it, you see the title appear but the paragraph does not appear? Makes no sense. I'm assuming the paragraph is getting stuck under footer or something?
Use this :
$(document).ready(function() {
$(".view").hover(function() {
$(this).parent().children(".test").show();
});
$(".test").hide();
});
Update :
After looking at the code at your link I found that the the problem is due to one of the jQuery plugin used (isotope), To fix it use this :
$(document).ready(function() {
$(".view").hover(function() {
$(this).parent().children(".test").show();
$('.isotopeWrapper').isotope('reLayout');
});
$(".test").hide();
});
I'm trying to make a jQuery toggle menu for a mobile website for one of my clients. I'll have to tell you i'm not experienced in javascript and i justed started looking at it.
The current website is a Wordpress website so the menu structure is generated by WP.
Because this is generated by WP i need to use javascript to manipulate the data for adding the + - and > signs for toggleing and if no childeren to go directly to the page.
I use this javascript for adding the spans with the desired icon. I've managed so far.
http://jsfiddle.net/9Dvrr/9/
But there are still 2 problems i can't seem to figure out.
Remove the href from the "a" when the "li" has a "ul" child.
This should remove the links of the items so they will only toggle (not link) to navigate straight throug to the deepest level.
Currently the javascript is adding mutiple spans with the icons. I can't seem to figure out why
I'm stuggeling with this for a while now and was wondering if someone could help me with this.
In the jsfiddle you provided, you loop on the elements to add spans with a "+" or "-" sign inside, depending on the case. The thing is, the HTML you're starting with already has those spans in it, wich is why you're seeing some duplicates.
As you said you can't add those spans in the HTML because of your WP strucutre, I guess they come from a bad copy/paste you did while creating the jsfiddle. I removed them in the HTML and added a return false to prevent linking to another page when there is a ul inside the a tag.
http://jsfiddle.net/wzzGG/
Your first problem can be solved with the following:
$.each($('#menu-mobiel li'), function(i, value) {
var $this = $(this);
if ($this.has('ul').length > 0) {
$this.children('a').attr('href','javascript:');
}
Your second problem is a bit harder for me to understand. Do you only want one + for items with submenus, and one > for items with a link?