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.
Related
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.
the problem at the moment is that when the windows get resized some text gets cut off. I've seen websites where when the window resizes the text changes to an abbreviation or another word. People were telling me that this is angular js but since then I've tried finding something related to it and couldn't. So i'm back to using good old javascript and here is my code
http://jsfiddle.net/duy8zvmm/71/
The problem is that i don't want this first
var myspan = document.getElementById('players-signedup');
if (myspan.innerText) {
myspan.innerText = "Players";
}
else
if (myspan.textContent) {
myspan.textContent = "Players";
}
and can't understand why i need it there, because the resize if statements i have do work, i have tested using background colors on a div. So i can't understand why they aren't working here
I have this AngularJS app. Everything works just fine.
Now I need to show different pop-ups when specific conditions become true, and I was wondering what would be the best way to proceed.
Currently I’m evaluating two options, but I’m absolutely open to other options.
Option 1
I could create the new HTML element for the pop-up, and append to the DOM directly from the controller.
This will break the MVC design pattern. I’m not happy with this solution.
Option 2
I could always insert the code for all the pop-ups in the static HTML file. Then, using ngShow, I can hide / show only the correct pop-up.
This option is not really scalable.
So I’m pretty sure there has to be a better way to achieve what I want.
Based on my experience with AngularJS modals so far I believe that the most elegant approach is a dedicated service to which we can provide a partial (HTML) template to be displayed in a modal.
When we think about it modals are kind of AngularJS routes but just displayed in modal popup.
The AngularUI bootstrap project (http://angular-ui.github.com/bootstrap/) has an excellent $modal service (used to be called $dialog prior to version 0.6.0) that is an implementation of a service to display partial's content as a modal popup.
It's funny because I'm learning Angular myself and was watching some video's from their channel on Youtube.
The speaker mentions your exact problem in this video https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 around the 28:30 minute mark.
It comes down to placing that particular piece of code in a service rather then a controller.
My guess would be to inject new popup elements into the DOM and handle them separate instead of showing and hiding the same element. This way you can have multiple popups.
The whole video is very interesting to watch as well :-)
Create a 'popup' directive and apply it to the container of the popup content
In the directive, wrap the content in a absolute position div along with the mask div below it.
It is OK to move the 2 divs in the DOM tree as needed from within the directive. Any UI code is OK in the directives, including the code to position the popup in center of screen.
Create and bind a boolean flag to controller. This flag will control visibility.
Create scope variables that bond to OK / Cancel functions etc.
Editing to add a high level example (non functional)
<div id='popup1-content' popup='showPopup1'>
....
....
</div>
<div id='popup2-content' popup='showPopup2'>
....
....
</div>
.directive('popup', function() {
var p = {
link : function(scope, iElement, iAttrs){
//code to wrap the div (iElement) with a abs pos div (parentDiv)
// code to add a mask layer div behind
// if the parent is already there, then skip adding it again.
//use jquery ui to make it dragable etc.
scope.watch(showPopup, function(newVal, oldVal){
if(newVal === true){
$(parentDiv).show();
}
else{
$(parentDiv).hide();
}
});
}
}
return p;
});
See
http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/
for a simple way of doing modal dialog with Angular and without needing bootstrap
Edit: I've since been using ng-dialog from http://likeastore.github.io/ngDialog which is flexible and doesn't have any dependencies.
Angular-ui comes with dialog directive.Use it and set templateurl to whatever page you want to include.That is the most elegant way and i have used it in my project as well.
You can pass several other parameters for dialog as per need.
Ok, first off. No jquery, no ajax, just pure javascript.
I have the following code on a page called text.html.
<html><body>
<script>
function live(ID,txt2) {
var a = document.getElementById(ID);
a.innerHTML = (txt2);
}
setInterval(live, 250);
a.innerHTML =(txt2);
</script>
<div id="txt1">Live</div><p />
</body></html>
I have the following code on live2.html
<html>
<body>
<p />
<iframe width="400" height="50" src="text.html" name="frameA" id="frameA"></iframe><p />
<input type="button" value="Live" onClick="document.getElementById('frameA').contentWindow.live('txt1','L I V E')">
<input type="button" value="Rebroadcast" onClick="document.getElementById('frameA').contentWindow.live('txt1','Rebroadcast')"><br />
text
</body>
</html>
The current code works exactly as I wanted it to by updating the information in an iframe. My issue is this. If someone visits text.html directly, I want them to be able to see whatever I've changed that document to.
Example:
I click on a button and the text in the iframe now says rebroadcast.
Someone else visits text.html and they also see rebroadcast. If while they are looking at text.html, I hit the live button, the text.html page will update with the word live.
I can do PHP scripting on this as well. I have tried jquery and have issues with getting it to work correctly and I don't really have the knowledge or access to implement much of anything else.
This is an on-going project. The end result, I hope, will be an iframe that I can update while not actually being on the same page that the frame is located on. (same domain tho) The content will be anything from images, to youtube embeds and pictures. I'm trying to get a more comprehensive idea of how this language works and that's why I'm taking it one step at a time. I have no issue with visiting tutorials or looking at pre-made solutions. Thanks for your help. :)
I think I'm probably missing something. Users will always see the text "Live" because that's what's hard-coded in text.html. It doesn't matter if you change the text through JavaScript since it will only affect the browser that you're seeing. You need to save it to a persistence storage (ie. database) and dynamically display it on the page.
live2.html can use AJAX to send the changes to the server, which can then update live.html. But this is a poor way to do it, since it means that the contents of live.html are updated outside of your version control and/or content management system. It's better to use a real database and generate the page dynamically, as suke said.
First off this is what happens when someone learning programming languages doesn't fully comprehend what a language can and can't do. The original idea was to let a specific group of people know when it was a re-broadcast or when the show was live. I wanted the control of when to change that information to only be available to an admin of sorts. In the end the entire idea got scrapped and entirely impractical. The solution, essentially, doesn't exist in the context of the way I wanted to accomplish this. Years later...
The solution is to have live and rebroadcast inside div tags with CSS. Then use a JavaScript function to change the attributes of the divs to either be hidden or shown. The button or or link would need to exist on the same page as the live or rebroadcast text. This would also mean that there is no need for a separate frame. To have this element controlled from outside the page it's on could only be done by storing a value somewhere else and having that value periodically checked.
JSFiddle
The Script:
var x = document.getElementById("txt1");
var y = document.getElementById("txt2");
function htext() {
x.style.visibility = 'visible';
y.style.visibility = 'hidden';
}
function stext() {
x.style.visibility = 'hidden';
y.style.visibility = 'visible';
}
function ctext() {
var z = getComputedStyle(x).getPropertyValue("visibility");
if (z != 'hidden') {
stext();
} else if (z != 'visible') {
htext();
}
}
The CSS:
#txt1 {
visibility: hidden;
margin-left:0px;
}
#txt2 {
visibility:visible;
margin-left:0px;
}
The HTML:
<span id="txt1">Live</span>
<span id="txt2">Rebroadcast</span>
<br />
click
To be honest. I'm not entirely sure of the programming needed to store information somewhere else and have a check to see if certain conditions are true. The program above will essentially hide and show a div. I could probably go a step further and use JQuery to create and remove the actual div itself. In the end this is essentially close to the solution I ended up using and then later on discarding and giving up on the project.
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.