Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I wish to dynamically add a button on a html form so that a user can upload multiple files when filling-in the form. The css design is both elastic and fluid and the intention is that whenever a user clicks on the "add file" link, a new button is added to allow the user to browse for the file, add it and finally upload it. The buttons should appear on the main content area of the page and should not overflow outside the footer area and should be rendered vertically with each button appearing on a newline. The code below does exactly that. This question is very much related to this question but with a twist of the css (design) requirements.
function myFunction() {
var btn = document.createElement("BUTTON");
var text = document.createTextNode("Browse..");
btn.appendChild(text);
var newbutton = document.getElementById("button"); //new div button element introduced on html.
document.body.insertBefore(btn,newbutton);//insert before method
}
/*Mailu*/
div {
padding: 1px 0;
}
#header {
background: #DDDDDD;
}
#footer {
clear: both;
background: #DDDDDD;
}
/*add css as suggested here https://stackoverflow.com/a/2038374/2941758*/
button{display:block;}
<!DOCTYPE html>
<html>
<body>
<link href="button.css" rel="stylesheet" type="text/css"/>
<div id = "header">
<p>Home</p>
</div>
<p>Upload file.</p>
First name: <input type = "text" name = "Firstname"><p>
<div id = "button"> <!--added div button on html-->
<a href="javascript:void(0)" onclick= "myFunction()" > Add file</a>
</div>
<div id="footer"><p>footer</p>
</div>
</body>
</html>
[1]: https://stackoverflow.com/questions/29943352/dynamically-create-element-but-use-a-href-instead-of-a-button-onclick
Replace:
#button {
With:
button {
The # is an id selector, meaning it will apply the styles to the element that has id="button".
If you leave out the #, it will match all <button> elements.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 months ago.
Improve this question
Suppose if we give some properties to all h1 tags using external css and we have to give one more property (not present in css) to only one of the h1 tag with same remaining properties in css.So do I have to write seperate code by giving that tag a id or there is any shorter way?
two classes sounds like the right way to go, even better than generic h1 tag directly, for example:
index.html
<div>
<h1 class="generic-class">generic</h1>
<h1 class="generic-class">generic</h1>
<h1 class="generic-class specific-class">specific</h1>
</div>
style.css
generic-class {
color: red
}
.specific-class {
font-weight: 800
}
This way, all of them are red, and the last one is red and bold too.
Another solution is to add inline css code directly into the style attribute of the element. In the snippet below I show multiple ways of selecting which element you want to edit with various selectors and js functions.
Though you should keep in mind it's better to have only 1 <h1> on a webpage, mostly for SEO purposes.
// Select h1 by query, for example query below selects the first h1
let h1 = document.querySelector('h1:first-of-type');
h1.style.color = "black";
// Select h1 by id
let h1_2 = document.getElementById('h1_to_select');
h1_2.style.color = "blue";
// Select h1 by index
let h1_3 = document.getElementsByTagName('h1')[1];
h1_3.style.color = "green";
h1{
font-size:16px;
font-family:sans-serif;
color:red
}
<h1>This is a h1 title</h1>
<h1>This is a h1 title</h1>
<h1>This is a h1 title</h1>
<h1 id="h1_to_select">This is a h1 title</h1>
<h1>This is a h1 title</h1>
<h1>This is a h1 title</h1>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I would like to display a pdf which covers my web page.
I know I can use an iframe/embed element to add the pdf but I don't know how to make it cover the whole page.
I want to have a greyed out area on either side which when clicked will close the pdf.
It should look roughly like this:
This application only needs to work on the latest version of Chrome as this is an internal tool and I would like to use the default chrome pdf viewer.
I am happy to use jquery or another framework.
If someone could point me in the right direction, much appreciated.
Sorry but i do not have the code for closing the pdf when the gray area is clicked but you can create a x button to close the pdf. Use this code as an example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div data-toggle="modal" data-target="#mypopup">
<button>Open the PDF</button>
</div>
<div class="modal fade" id="mypopup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<!--Put your iframe here-->
</div>
</div>
</div>
</div>
Here is an example where I made a class modalTarget for an a element which will allow the pdf to be displayed above the page. Clicking on either side will hide the pdf and the sides are grayed out.
The reason why I decided to go this route was so that you could right-click and click Open in a new tab to open the pdf in a new tab.
Each a element has a unique embed element so if you unclick and reclick it will not have to reload and your position on the pdf will be saved.
I recommend you open the snippet in Full page to be able to see well.
Note: this snippet uses a png as stackoverflow's sandbox does not allow loading of a pdf however I have tested it using a pdf and it works well.
let pdfMap = new Map();
function viewPDF (event)
{
let a = this;
if (!pdfMap.has(a))
pdfMap.set(a, document.body.appendChild(pdfModal.content.firstElementChild.cloneNode(true)));
let modalDlg = pdfMap.get(a);
const newSRC = a.href;
if (newSRC !== modalDlg.querySelector('embed').src)
modalDlg.querySelector('embed').src = newSRC;
modalDlg.style.display = '';
modalDlg.onclick = () => modalDlg.style.display = 'none';
return false;
}
document.querySelectorAll('.modalTarget').forEach(a => a.onclick = viewPDF);
a.modalTarget::after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
margin: 0 3px 0 5px;
}
<template id=pdfModal>
<div style="display:none; position: fixed; top: 0; left: 0%; width: 100%; overflow: hidden; z-index: 999999; height: 100%; background-color: rgba(0, 0, 0, 0.5)">
<embed onclick="event.stopPropagation()" style="position: fixed; top: 0; left: 25%; width:50%; height:100%;" />
</div>
</template>
<!-- Note: this is a png not a pdf. It works the same for a pdf (eg. https://html.spec.whatwg.org/print.pdf) but the stackoverflow sandbox means that I can't. -->
<a href="https://i.imgur.com/BMDcTrH.png" class=modalTarget>View PDF</a>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
is there a way where in I can disabled a certain element/class/id to be appended?
<div class="someHtmlElementHereWillAppendOnPageLoad">
-- but it dont want this part to be appended --
</div>
Sure -- add the attribute canAppend="no" to an element then use the attribute selector like this:
$(document).ready(function() {
/* add the attribute selector [canAppend!="no"] to your select or */
$("div[canAppend!='no']").append(" appended content here");
});
div { border: 2px solid black }
<!-- regular divs that dont have the noAppend attribute -->
<div>div 1</div>
<div> div 2</div>
<!-- special div that has the noAppend attribute -->
<div canAppend='no'>div 3 no append </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
EDIT
Since you dont know when the append operation will take place, just do this:
use jQuery to grab all of the values of for divs with a certain class and store those values into an atttribute by using encodeURIComponent() and $("").attr()
THen make a timer that constantly replaces the div's HTML with the desired HTML
$(document).ready(function() {
$(".someHtmlElementHereWillAppendOnPageLoad").each(function(i, ele) {
$(ele).attr("lockedContents", encodeURI($(ele).html()))
});
setInterval(function() {
$(".someHtmlElementHereWillAppendOnPageLoad").each(function(i, ele) {
$(ele).html(decodeURIComponent($(ele).attr("lockedContents")));
})
}, 100);
});
div {
border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someotherdiv">#1 dont care if it gets edited</div>
<br>
<div class="someHtmlElementHereWillAppendOnPageLoad">
-- but it dont want this part to be appended --
</div>
<br>
<button value="append to all divs" onclick="$('div').append(' appended text ');">Append to all divs </button>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<script type="text/javascript"></script>
<script src="jquery-1.11.1.js"></script>
<style type="text/css">
button.allbut{
background: none;text-shadow: none;margin:0,0,0,0;padding:0,0;
border-radius: 0px;color: blue;font-size: 100%;
font-family: Georgia, serif; text-decoration: none;
vertical-align: left;background: white;
border: none;text-align: center;
}
.showTopicbox{
padding:0%,0%,0%,0%;margin:0%;border:0.1px red;width:50%;height:auto;
background-color:white;color:black;
}
</style>
<title>puff4</title>
</head>
<body>
<button class="allbut" id="usinglabels">Using labels</button>
<div id="usinglabels" class="showTopicbox">Some
nice Queen's english here
...The property returns or sets a value that specifies which item in a
ListBox control is displayed in the topmost position, commonly used to
scroll Some nice Queen's english here
...The property returns or sets a value that specifies which item in a
ListBox control is displayed in the topmost position, commonly used to
scroll
</div>
<button class="allbut" id="connecting">Connecting</button>
<div id="connecting" class="showTopicbox">Some
nice Queen's english here
...The property returns or sets a value that specifies which item in a
ListBox control is displayed in the topmost position, commonly used to
scroll Some nice Queen's english here
...The property returns or sets a value that specifies which item in a
ListBox control is displayed in the topmost position, commonly used to
scroll
</div>
<script type="text/javascript">
$("#usinglabels").click(function () {$('#usinglabels').slideToggle(0);});
$("#connecting").click(function () {$('#connecting').slideToggle(0);});
</script>
</body>
</html>
ids should not be repeated.
<button class="allbut" id="usinglabels">Using labels</button> <-- id
<div id="usinglabels" class="showTopicbox">Some <--same id
$('#usinglabels').slideToggle(0); <--what am I supposed to select?
Change the id of the section you are trying to hide.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How do i make the black box reach the full height?
trulyamped.com/dropit
When you click on dropdown I want the entire background to be black. I Tried to do height:100% with position:abosulute but it does not seem to work. Please let me know how to get around this. Also an added bonus if you would like to help with it too is creating a animation so that the items on the nav appear with a small delay and fade-in.
Thanks
I want it to look similar to the MENU/Navigation on www.domanistudios.com/mobile/
You can use jQuery to find the height of the browser window and then you can apply this height to the ul element. A simple example for this
fiddle: http://jsfiddle.net/8hKEd/
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#clickme').click(function(){
$('#showme').css({'height' : $(window).height()});
$('#showme').slideToggle('slow');
});
});
</script>
</head>
<body>
<a id="clickme" href="#">Click Me</a>
<ul id="showme" style="display:none; background-color: #000; color: #fff;">
<li>
Some Text
</li>
<li>
Some Text
</li>
<li>
Some Text
</li>
<li>
Some Text
</li>
</ul>
</body>
</html>
You need to increase the height of the ul rather than the height of body. body has height based on the elements in it. Increase the height of ul menu class to 1000px. That should give you what you need.
.menu ul {
display: none;
height: 1000px;
}