I've got a few lines that look like this:
<input type="hidden" name="email" value="email#email.com" style="display:none" >
Each one is adding extra space, even though I've used the type hidden and display:none. I'm starting to think it's something in the CSS (http://www.pastebin.ca/2350649), but after changing up a few things can't find what is causing it either.
The input is all inside a form, if that makes a difference.
It's not the input element, but rather the html. If you have a setup like:
text
<input>
more text
The newlines/spaces between the text and the input element are rendered.
The simplest solution is of course to just remove that whitespace in your html when it's emitted. If you can't do that, one trick is to add font-size: 0 to the container and font-size ? to the individual elements to display.
http://jsfiddle.net/ExplosionPIlls/cs63w/
step1: add your codes in a div element with an id tag like this:
<div id="remove_br"><input type="hidden" name="email" value="email#email.com" style="display:none" ></div>
step2: add this jQuery code in your page before </html> tag:
<script type="text/javascript">
$("#remove_br").find('br').remove()
</script>
Note: don't forget to add this code for calling jQuery
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
For beginner programmer: If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
Adding jQuery to Your Web Pages click here.
Related
I've been using W3Schools' Javascript library to handle HTML includes onto other HTML pages. Everything has been going good, except I'm running into some formatting issues. When the include processes, it puts the HTML into the body tag when I'd prefer it into a different tag. I don't want my body tag formatting to impact the HTML content that's imported. I'm open to any solutions, but I'd prefer something that allows me to specify a specific tag in the HTML document to be imported into.
I've tried putting the Javascript call into the head or outside of the body tag but haven't had any luck.
Here's the code used by W3Schools: https://www.w3schools.com/howto/howto_html_include.asp
<script src="https://www.w3schools.com/lib/w3.js"></script>
<!-- import header -->
<div w3-include-HTML="./includes/header.html"></div>
<!-- import navigation bar -->
<div w3-include-HTML="./includes/navbar.html"></div>
<!-- Script to Handle W3Schools HTML Includes -->
<script>
w3.includeHTML();
</script>
Thanks for the help! I'm hoping there's a good way to do this, otherwise I guess I can format my text outside of the body tag... That's far from ideal though.
Did you try to replace <script> w3.includeHTML(); </script> by <script>includeHTML(); </script> ?
Say I have the following text input element:
<input type="text" value="Bruno">
Can I make the "B" in the value Bold? So it looks like Bruno?
I know it is pretty straightforward within <span> and <div> elements:
<span><strong>B</strong>runo</span>
But is this possible with an <input> element? If so, would the value still remain the same regardless of the styling applied to it?
An <input> or <textarea> element on it's own won't support this type of behavior. You could use an approach that would hide your actual element and use a facade to copy the values from your element and output them as raw HTML into a <div> to be displayed :
<!-- An element to handle typing your content that calls a function -->
<input id='input' onkeyup='updateOutput(value);' />
<hr />
<!-- Your output element (to display your content) -->
<div id='output'></div>
<script>
// A function to map your content and output it in your "output" element
function updateOutput(html){
document.getElementById('output').innerHTML = html;
}
</script>
You can see an example of this here and demonstrated below :
A better alternative might be to use a Javascript-based HTML editor like TinyMCE or CKEditor.
I need to store some hidden HTML for each li element. What's the best way to do this?
I've tried storing it as data on each li element but the hidden HTML tags screw up the li element.
I've managed to do it by storing the data in a hidden text area for each li.
Is this the best way to do it? Or is there a better way.
I'm storing around 200 chars.
Put your hidden HTML in a div / span with a CSS class that has:
display: none;
See the display property.
You can put a hidden field at each li to put the data! I think that hidden fields will work well, and theres no limit for the amount of data.
<input type="hidden" id="myId" value="value here pls..." />
Hopes this help you!
<input type="hidden" value="your hidden stuff here" />
Is your data HTML or is it content? Do you need it for programatic reasons? If it's just a matter of hiding content, as you would for a screen reader when using image-swap, for example, use css:
#my_content {
text-indent: -9999px;
}
Beyond that you could use hidden form fields, or simply use CSS to hide the element entirely.
try this
<div style="display:none;">your html here.....</div>
One way I've recently learned to do this is to use <script> tags. You can add an ID to the script tag, and reference in javascript using that ID to fetch the content and do something with it. I use this for inline templates.
http://www.bennadel.com/blog/2411-Using-Underscore-js-Templates-To-Render-HTML-Partials.htm
<script id="foo" type="text/template">
<p>your text here</p>
</script>
now in real javascript:
<script type="text/javascript">
<!-- assume jquery for the sake of assuming something -->
$(function() {
fooTemplate = $("#foo").clone();
$("#target").append(fooTemplate);
});
</script>
I created a fiddle, but I had to use a div in the HTML area because fiddle doesn't like having an extra script node... The principle is the same -- just change to script in your html in your page.
If your <li> are children of an <ol> element and values you want to store are integers, then you can store them as
<li value="11">DISPLAY ITEM</li>
another approach:
if you want your extra HTML DATA to be present, but you don't want to render it at all (i assume this because you said that you tried to hide them inside a textarea -and thats why im posting this answer) then why not just put it inside comments?
<li> your code....
<!--
<div>my hidden html code of this li, of course i won't have nested comments in here!!!</div>
-->
</li>
Of course this is tricky, and not easy to get this data, but if you need this just for debug it will be ok.
Otherwise i'm in favor of display:none in a wrapped div.
Captain Obvious.
Here are two methods not mentioned in other answers.
The advantage of both methods is that, when you're working in your HTML programming environment, you get normal syntax coloring and error-checking.
Method 1
<template>
<div>Here's my hidden HTML.</div>
</template>
Method 2
<span hidden>
<div>Here's my hidden HTML.</div>
</span>
I'm currently developing a website in Drupal and I'm trying to put a custom twitter block. Here's my HTML code:
<ul id="twitter_update_list" class="twitter"><li>Twitter feed loading</li></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/terryamorin.json?callback=twitterCallback2&count=5"></script>
And here is the relevant custom CSS:
#twitter_update_list a {
color: #CA0A6C;
}
Now for some reason the code won't update properly or will only work for one link and not all of them. I checked with firebug and if I choose the element and disable/re-enable the font-size in here:
element.style {
font-size: 85%;
}
then it shows properly for that one link. Why is this happening? Am I not overriding the right properties?
UPDATED:
<div class="content">
<ul id="twitter_update_list" class="twitter">
<li><span>Vote for Cooper in the Fido Casting Call once a day every day! We could have our own UOGC puppy in a commercial !! http://t.co/bDwdKlQ6</span> <a style="font-size:85%" href="http://twitter.com/UOGreekCouncil/statuses/237535525911793664">about 15 hours ago</a></li></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/uogreekcouncil.json?callback=twitterCallback2&count=1"></script></div>
FIXED:
I used the following CSS instead and it seemed to work:
#twitter_update_list a{
color: #CA0A6C;
}
This is simply a case of your attribute selector not actually matching. The attribute getting set on the actual element is style="font-size:85%", while the attribute you're searching for in your CSS is style="font-size: 85%;" (notice the extra space and the addition of a semicolon). The text must match perfectly.
You could change the selector to look for the actual style property being set:
#twitter_update_list a[style="font-size:85%"]
See the jsFiddle.
Additionally, since those links appear to be the only ones using inline styles, you could just look for the presence of the style attribute, like so:
#twitter_update_list a[style]
Since you're using an external JavaScript file to create this HTML, modifying it to use classes instead probably isn't an option, although that's what I'd ultimately recommend. Looking for specific styles may work for now, but if the JavaScript ever changes and the structure isn't exactly the same, it will instantly break your CSS.
When you set an html element to have display: none, the content inside that element (e.g. images and flash) wont be loaded by Firefox until the element is set to be displayed.
But Internet Explorer dont behave like that. It loads everything inside hidden elements from start.
Is there a way to prevent IE from loading such content without using javascript?
Don't insert any content into that element? Only load it using ajax when the user makes is visible.
As my question regarded a solution not using javascript, I'll answer my own question and just say there is no way so far to prevent IE from loading external files that are part of hidden content.
As the other answers suggest it, there are ways to avoid the problem, but not to solve it. So the answer to my specific question is "NO".
Actually if you set the visibility to hidden, ie won't load it.
Here is an example of what ZippyV is talking about (with a twist)... copy and paste the code below into a new file with an HTML extension and run it!
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1>This is the title</h1>
<p>This is a paragraph</p>
<div id="hidden-content"></div>
<p>Another paragraph</p>
<input type="button" id="add-content" value="Add Hidden Content" />
<script type="text/javascript">
$(document).ready(function() {
$("#add-content").click(
function() {
var info = unescape('%53%68%68%68%2E%2E%2E%20%73%65%63%72%65%74%20%69%6E%66%6F%72%6D%61%74%69%6F%6E');
$("#hidden-content").html(info);
}
);
});
</script>
</body>
</html>
The twist is that the hidden content to be displayed is first escaped (using the Javascript escape() function). Also, you can place the javascript in a separate file!
display: none should be hiding the element contents from ie as well as any other browsers.
Did you close all the tags?
function hide_show_content(el_ID){
//try <element hidden> property NOT IExplorer
try{el_ID.hidden = ((el_ID.hidden) ? false : true);}catch(_e){}
//try style=display:none for IExplorer
try{
if(el_ID.style.display==""){return;}
el_ID.style.display = ((el_ID.style.display=="none") ? "inherit" : "none");
}catch(_e){}
}
<span id="text#1" style="display:none;" hidden>TEXT TO BE HIDDEN or SHOWN laiter.</span>
Click to show TEXT