I am trying to find a way to make my code appear as text in HTML but in the way you see the code on here
I want my code to appear like this on the website
right now when I run the code, I got it to appear as text but it looks like this:
<h1>"this is a heading"</h1>
But I want it to look like this:
<h1>"this is a heading"</h1>
basically, I'm trying to get the code that appears on my website to look like I took a screenshot of the code editor and put it on the site
If you don't understand what I'm trying to ask please ask me and I will try to elaborate further
quick answer will be make a div, give it a specific background color, use overflow properties to make it scrollable. Use monospace font and give specific color and background color. That'll look like a screenshot you took from code editor. but it'll be scrollable and it's necessary if you have a lot of codes.
<h1><span style="background-color: #e4e6e8;">"this is a heading"</span>
</h1>
A simple inline style should be sufficient for a one off but if you wanted to repeat it then defining a class either in the <head> section or by defining the class in a stylesheet and adding a link again in the <head> section would be a better approach.
Classes can be re-used easily and if you need to make changes then you only need to change the class attributes/definition and upon reload you changes are reflected everywhere the class was used/inserted.
This is simplest way for your apparently simple need.
<h1><span style="background-color: #e4e6e8;">"this is a heading"</span></h1>
To learn more about styling HTML why not follow this link perhaps Styling HTML Elements # Tutorial Republic (Sadly no affiliation!)
I'm not sure if I understand your question but You can use the <pre>...</pre> tag to obtain code like text :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My document</title>
<script>
function escapeHTML(html){
const chars = {'<':'<','>':'>'};
let s = html;
s = s.replace(/[<>]/g, m => chars[m]);
return(s + "<br>");
}
</script>
</head>
<body>
<h1 style="font-size:1.6em">"Title"</h1>
<div style="font-size:1.4em">code</div>
<pre id="output" style="font-size:1.4em;display:inline-block;background-color:#cccccc">
Your code is written here
</pre>
<script>
let display = document.getElementById("output");
display.innerHTML = escapeHTML('<h1 style="font-size:1.6em">"Title"</h1>');
display.innerHTML += escapeHTML(' <div style="font-size:1.4em">code</div>');
display.innerHTML += escapeHTML(' <pre id="output" style="font-size:1.4em;display:inline-block;background-color:#cccccc">');
display.innerHTML += escapeHTML(' Your code is written here');
display.innerHTML += escapeHTML(' </pre>');
</script>
</body>
</html>
I have a website that is primarily used in K-12 schools. I have some social media buttons on it like Facebook 'like' and Pinterest 'pin it'. However, I'd like to have these buttons be hidden....where you have to click once on something (like an image that is covering them up but disappears when clicked....or a tab that just sort of scrolls away to reveal the buttons behind it).
The reason for this is because these sites are usually blocked in schools (I realize there's probably nothing I can do about this) and these buttons look kind of ugly when they're blocked (it'll show a question mark or or something in place of the button in these cases). However, I do want the people who do not have them blocked to be able to access and see them easily.
I am in search of a simple solution to this where the buttons wouldn't be immediately visible until you click on something.
If you're using JQuery or any other support library, you would have plenty of way to achieve your goal, even with a lot of visual effects.
Anyway, the simplest way to achieve it is by playing with the "display" attribute of the element.
Add this in your html head tag:
<script type="text/javascript>
function showElement(){
// get a reference to your element, or it's container
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
Now add a click event on the element you want to use to show your hidden content:
<img id="imageId" onclick="showElement()" src="..."/>
If you want to hide your "hidden" element by default, add a inline style:
<div id="elementId" style="display:none">...your buttons here...</div>
Obviously, there are a lot of better ways to achieve it (eg. changing css classes), but I think you would be able to work with the above instructions.
Edited to improve the answer:
Create an HTML structure like the following:
<div>
<img id="imageId" alt="" src="..." onclick="showElement()">
<div id="elementId" style="display:none">
<!-- your buttons, anchors or anything else you want to be hidden by default-->
</div>
</div>
So, when you click the image, the buttons appear and the image disappear.
Thanks for your help! I tried this and it works well. I think it was a pretty simple solution (even though I don't know javascript) and accomplished just what I wanted to do, which was to basically hide those buttons until an image that is covering them is clicked. Just for the record, here's the exact code I used:
<script type="text/javascript">
function showElement(){
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
(All I changed was adding the missing quotation mark on the first line and took out that one line about referencing to the element since I assume that is something optional.) For the html part, here's exactly what I did:
<div>
<img id="imageId" src="/images/cover.jpg" alt="cover" onclick="showElement()" width="185" height="124" />
<div id="elementId" style="display:none">
(hidden content went here)
</div>
</div>
(I didn't change much on this part either other than closing the image tag, putting in the dimensions for the image, etc.) Hopefully, I didn't do any of this wrong, but it seems to work as intended. The only other thing that would be a nice touch would be if there was a way to make it have the 'hand with pointing finger' symbol appear when you hover over it....in order to make it clear that it is a clickable image, but if not, it's not essential.
My website needs a print option but i've been trying and googling for weeks and i can not figure it out. The site has a div on it that has a scrollbar in it. When i print, only the visible area prints.
I've tried tons of things i've found online from javascript to #media print, i can't make it work.
This is my div:
<div style="overflow:scroll; height:814px" id="results">
<table>
...contents, some tables, text and images...
</table>
</div>
As soon as i remove the "overflow:scroll" printing works fine, it's the scrolling that keeps messing me up. I really need step by step hold-my-hand instructions on how to make this work.
Hope someone can help me,
Jay
Use this JS function:
Printable DIV is results
function printpage()
{
var originalContents = document.body.innerHTML;
var printReport= document.getElementById('results').innerHTML;
document.body.innerHTML = printReport;
window.print();
document.body.innerHTML = originalContents;
}
https://github.com/jasonday/printThis
pay close attention to the removeInline feature, which will remove inline styles for printing.
I have a web-page that contains a hidden <div> using display: none; and I have a button on the page, that when clicked will change the visibility of the <div>, and overlay it on top of everything else (because it has a z-index set).
Within this <div>, I have a Google Map embedded using an iFrame with the Google Map pin dropped on the location I am trying to show to my users.
The problem
Because the Google Maps iFrame is loading on the page load and while the <div> is hidden, it means that when the <div> is shown the Google Map is not aligned properly (the pin and central location are now in the top left hand corner)
The solution I am looking for
I know that some people are probably going to tell me ways in which I "should" recode my entire page. What I am actually looking for is some sort of onClick function I can set that will reload the iFrame so that the map is properly centered.
Things to know
This iframe has a Google Maps page as its src. i.e. a URL rather than a link to a file in my site.
Any help would be greatly appreciated! A lot of code I have looked at searching the net seems to work at refreshing a specific file that is referenced rather than an external URL.
Would it work if I embedded the map in another HTML file, and then placed that HTML file as the frame source?
I had this similar issue and solved it by changing the css style of the div through jquery, and changing the place where I put the iframe of google map.
The problem
The jquery code:
<script type="text/javascript">
$(function(){
$("#map_link").click(function(event) {
event.preventDefault();
$("#map").slideToggle();
});
});
</script>
The HTML:
I had the link and the google map iframe loaded inline into a div with a display:none css style. Because a display:none style makes the div width:0 and height:0, the address requested in google map doesn't display properly.
<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none">google_map_iframe_here</div>
The solution
The jquery code
<script type="text/javascript">
$(function() {
$("#map_link").click(function(event) {
event.preventDefault();
$("#map").slideToggle();
$("#map").html('google_map_iframe_here').css('display','block');
});
});
</script>
The HTML: The div where I used to put the map now is empty, because I load the map only when clicking on the link, and at that moment I change the css style from display:none to display:block, so the map shows well.
<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none"></div>
Hope this helps!
Have a good coding day!
I'm no pro, but I removed the onload="initialize()" from the body tag and changed it to onclick="initialize()" in the button that unhides the div. This seems to work now.
I'm not using an iframe (I'm using version 3 of the Google Maps API), but just had the same "not aligned properly" issue due to a 'hidden' div. My fix, instead of using display: none, which removed it from the DOM entirely, I used visibility, and height like so:
.myMapDiv {
visibility: hidden;
height: 0px;
}
I believe what's happening is that because 'visibility: hidden' actually keeps the element in the DOM still, the map is able to render as intended. I've tested it out in FF/Chrome/IE 7-9 and seems to be working so far without issue.
After hours of searching on the Internet and getting no results I decided to try what I put in as my final side note on my question and it worked!
I simply made a second file called map.html and inside the code was literally:
<html>
<iframe> </iframe>
</html>
with obviously the Google Maps source and then in my main page I had the src for the iframe linked to pages/map.html instead of the Google Map link.
instead of hiding the div with display:none, use something like position: absolute; top: -9999px; left: -9999px
then, when you want to show the content for that div, set those properties to position: static; top: auto; left: auto or something like that
You can simply refresh the iframe like this:
var myIframe = jQuery('#myIframe');
myIframe.attr('src',myIframe.attr('src')+'');
I had the same problem, my solution was to set both the div & the iframe to 0px height and then have it changed to the desired height when toggled.
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var ifr = document.getElementById("iframe");
var text = document.getElementById("displayText");
if(ele.style.visibility == "visible") {
ele.style.visibility = "hidden";
ele.style.height = "0px";
ifr.style.height = "0px";
text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
}
else {
ele.style.visibility = "visible";
ele.style.height = "420px";
ifr.style.height = "420px";
text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
}
}
</script>
<div id="mb">
<a id="displayText" href="javascript:toggle();"><img src="#" border="0" width='180' height='65'></a>
</div>
<div id="toggleText" style="visibility: hidden; height: 0px;">
<p><iframe id="iframe" style="height: 0px;" src=#" width="650">
</iframe></div>
<script type="text/javascript">
$(document).ready(function (){$("#showMap").slideUp();})
</script>
<script type="text/javascript">
function showMap()
{
$("#showMap").slideToggle();
}
</script>
Show / Hide Map
<div id="showMap" style="margin-left:15px; width:615px; height:400px;">
<?php require_once "map.php";?>
</div>
There is a solution using both css and jQuery.
First you need a wrapper div without height which will include the iframe.
In this way the iframe will load normally without be visible at all.
Next using jQuery you can display/hide the iframe.
HTML
<div id="map-show">Show Map</div>
<div id="map-hide">Hide Map</div>
<div id="map-wrapper" style="height:0; overflow:hidden;">
<div id="gmap">
<iframe width="850" height="650" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="xxx"></iframe>
</div>
</div>
CSS
.hidden {
display: none;
}
jQuery
$(document).ready(function() {
$('#map-show').on('click',function(){
// Remove class hidden from map - Display map
$('#gmap').removeClass('hidden');
// Set height to map container div - ONLY one time needed
$('#map-wrapper').css('height', 'auto');
});
$('#map-hide').on('click',function(){
// Add class hidden to map - Hide map
$('#gmap').addClass('hidden');
});
});
I have been struggling with something like this as well. Where I initially add a class .hidden which is display: none;. But when I toggle .hidden, the map is not centered. I found that waiting until the map is fully loaded, using the idle event listener before adding the class .hidden solved all my display issues.
google.maps.event.addListenerOnce(map, 'idle', function(){
// do something only the first time the map is loaded
$mapContainer.addClass('hidden');
});
reference:
How can I check whether Google Maps is fully loaded?
You could use visibility hidden and use jQuery to show and hide it.
$('click-button').click(function(){
var visibility = $("hidden-div").css("visibility");
if (visibility == "hidden")
$("hidden-div").css("visibility","visible");
else
$("hidden-div").css("visibility","hidden");
});
Here is a solution that does not require any programming at all!
When getting the embed code, click "customize and preview embedded map", and then just drag the map down and to the right so that the push pin is in the lower right corner and then grab the new embed code.
When the map centers in hidden mode, it will still come up correctly when expanded. (not perfect I know, but if all you really want is for the push pin to show on the map, totally works)
Same issue, easy solution.
css hidden leave a space in html flow. I don't know if a css position outside the screen is well accepted on every device and get a block perfectly hidden.
jquery is nice working with block width and height.
css:
#map {overflow:hidden; float:left;}
html:
show
hide
<div id="map">
<iframe width="100%" src="http://maps.google.com/maps f=q&source=s_q&hl=en&geocode=&ie=UTF8&iwloc=A&output=embed ...>
</div>
javascript:
var w=sames as gmap width;
var h=sames as gmap height;
$(document).ready(function(){
$("#map").width(0);
$("#map").height(0);
$("#btn_show").click(function(){
$("#map").show();
$("#map").width(w);
$("#map").height(h);
});
$("#btn_hide").click(function(){
$("#map").hide();
});
})
I encounted the same problem.
Solution
Using iframe as an external source works.
online demo
http://jsbin.com/nogomi/1
Make sure that iframe element's name attribute is the same as a element's target attribute
Inspired from https://developers.google.com/maps/documentation/javascript/
in CSS:
#googleMap { visibility: hidden; }
Original
beim Klick der die Karte öffnen soll jQuery:
EDIT
jQuery when you click to open the map:
$('#googleMap')
.css('display','none')
.css('visibility','visible')
.fadeIn(500);
});
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