See full project on Github: https://github.com/sosophia10/TimeCapsule (see js/experience.js)
I am using JQuery to create "applications" for my website. My issue is that I can't find the proper syntax for pulling the text of an html document into a string, so that the "application" button opens a window with an html file inside.
$('.openbuttonapp').dblclick(function () {
var $objWindow = $('<div class="window"> Put me in, Coach! </div>');
This function already successfully uses a string to create a window with html elements. However, my current program lacks the ability to easily modify, style, and organize my components.
I figure the proper code will look something like:
var entireDocumentHTMLAsAString = document.documentElement.innerHTML;
$('.openbuttonapp').dblclick(function () {
var $objWindow = $(entireDocumentHTMLAsAString);
However, this clearly didn't work out. All assistance is appreciated.
edit:
My problem is that I need to succinctly reference whole html pages without writing for a string within the variable. Right now, the function works by creating a window with that html text string inside. Instead of a string, I want to place any html document.
From what I believe you are looking for, there are many solutions. You can use the HTML 5 template tag for example.
I'm using the HTML 5 template tag to hold the HTML. Then using jquery to get the contents of that template. Then using jquery to modify elements within that template then for demonstration purposes, I'm appending it to a div.
$template = $("template#window").contents();
$template.find(".counter").text(10);
$(".testoutput").append($template)
.window {
width: 500px;
height: 200px;
border: 2px solid #000;
background: #f3f3f3;
padding: 10px;
}
.window .counter {
color: red;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template id="window">
<div class="window">Window <span class="counter"></span><br> Welcome to my Time Capsule!<b>(2018-2022)</b><br><br> <b>2018</b><br> -Purple Lightsaber (After Effects) <br><br><br>
</div>
</template>
<div class="testoutput"></div>
Related
I'm building a site that uses a JavaScript widget to embed a simple form into the page:
<script src="//example.com/formWidget.js?id=1234"></script>
This then injects the form HTML directly into the page for us to style to suit the site. However, the person who has made the form has included a lot of inline styling that's overriding the site's CSS. I don't want to make every CSS rule !important because that's usually a bad idea; and it's important to note that the inline styling is NOT done on a per-element basis (e.g. <span style="border: 1px solid red;">, which is solved in questions like this); but as a <style> block being injected into the page alongside the HTML:
<style>
.widget-form button {
border: 1px solid red;
float: left;
}
.widget-form input {
background: green;
}
</style>
The style block doesn't have an ID that I can selectively target, so how can I remove this injected inline style block? I'm fine using JS/jQuery to solve it, since that's how the widget is being added.
just put it on your css file
.widget-form button {
border: unset;
float: unset;
}
.widget-form input {
background: unset;
}
add !important if necessary
As long as the <style> block contains something uniquely identifiable, then it's relatively straightforward to remove. Using jQuery to loop through all the <style> blocks in the page, you can then check their content for the offending selector and remove the entire block:
$('style').each(function(index, elem) {
let styleBlock = $(this);
let content = styleBlock.text();
if (content.indexOf('.widget-form') > -1) {
// Found an inline style block - let's kill it!
styleBlock.remove();
}
});
You can also do this in a very similar way with plain JS:
var styles = document.querySelectorAll('style');
Array.prototype.forEach.call(styles, function(el, i) {
let content = el.textContent;
if (content.indexOf('.widget-form') > -1) {
// Found an inline style block - let's kill it!
el.remove();
// Or el.parentNode.removeChild(el); for maximum backwards compatibility
}
});
then try this
$( "<html>*/</html>" ).appendTo( "style:last-of-type" );
$( "<html>/*</html>" ).prependTo( "style:last-of-type" );
the selector changes according to your index file
I want to write content in a post editor and display it somewhere in the same page only.
Previously I tried:
<div class="post-header-title"></div> - Where I like to display my content.
In Post Editor:
<style>
.post-header-title:after
{
content:"Content that I'd like to display.";
display: block;
padding-top: 10px;
font-size: 40px !important;
color: rgb(187, 185, 185) !important;
font-style: italic;
}
</style>
The above step using Pseudo-elements worked perfectly and it rendered the text that I want to display in my desired place.
But it can not be highlighted and search engine can not index it. So it became useless. Here is a codepen:
http://codepen.io/anon/pen/Ggwjpj
This is just an example.
I want to do something like this.
So how can we do that? Can anyone help me please.
Jquery has many functions to add html to your web page. To reproduce something like what you did, just use the after method.
$(".post-header-title").after("<span class='text'>SomeContent</span>");
See an example
I have made a div clickable using jquery. Is there a way to also tell the browser to display the target of the clickable div like it does for anchors? (example in the bottom left of the image below)
In answer to those suggesting using an anchor tag - That's not the question I asked. I want to avoid using anchor tags as that requires changing a lot of html, rather than a small amount of jquery. And even if changing the html to use anchors is the correct thing to do - it will still be useful to know if this is possible.
Edit it seems this is not easilly possible, but an alternative suggested by Pete, using jquery to wrap the div in an anchor works fine (better than I thought it would)
Just use a normal link and hide it:
a {
opacity: 0;
font-size: 100px;
}
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
<div>
hidden link
</div>
I'm trying to append a div inside a div and load a JS inside it. I actually want to do what this link is doing, but here the div is already predefined and on top of that JS and CSS files are getting applied to that div, but I need to append a div ad then act it as an odometer. How can I do it?
So here is what I'm trying.
<div id="abc" class="odometer">13</div>
$("#abc").append("<div id = 'odometer' class = 'odometer'><script src='http://github.hubspot.com/odometer/odometer.js'></script> <link rel='stylesheet' href='http://github.hubspot.com/odometer/themes/odometer-theme-car.css' />")
abc.innerHTML = 222456.89;
I'm not getting the required o/p. How can I do that?
The following is written in documentation :
How To Use.
Add the js and a theme file to your page:
Any element with class name "odometer" will automatically be made into an Odometer! When you want to >update the value, simply update it the same way you normally would.
element.innerHTML = 123 // Native, or.
$('.odometer').html(123) // with jQuery
So, just create an HTML structure of your choice and add the .odometer class to the div in which you want to render the odometer it will automatically do that as these guys taking .odometer as a filter to find the source node.
You don't need to actually include the script inside the div include it anywhere inside body and you are good to go.
Here is demo fiddle
i have added borders for more clearity
.odometer {
font-size: 100px;
border: solid 4px green;
}
.outer {
border: solid 4px red;
}
I'm looking for a way to disable the copying of a specific area of text when you use Ctrl + C, etc. Whether I have to write the text a different way or not.
http://gyazo.com/721a0a5b5af173beb1ad3305633beafb.png
Above is what this is for. It's a syntax highlighter I have been working on (3 languages supported so far). When the user selects ANY text in any way, I don't want the line numbers to be copied.
I can't think of a way to display line numbers, without them actually being there.
As long as the line numbers and the source code are mixed together, this is going to be tough to prevent programmatically, if not impossible.
The ideal way would be having the source code in an actual container of its own.
Open a document inspector and look at how Github do it, for example: https://github.com/jbrisbin/riak-exchange/blob/master/Makefile
they have a separate <pre> element containing the line numbers, and a <table> cell containing the code. (I assume selecting is a reason why they use tables here, but I do not know for sure.)
Give this a try...
Demo: http://jsfiddle.net/wdm954/UD8Dq/7
I layered the div so the code div is on top and the numbers are behind. When you copy and paste you should just get the code.
.lines {
position: absolute;
width: 80%;
color: #666;
}
.lines pre:nth-child(odd) {
background-color: #EEE;
}
.code {
position: absolute;
z-index: 2;
padding-left: 5%;
width: 80%;
}
<div class="box">
<div class="lines">
<pre>1</pre>
<pre>2</pre>
<pre>3</pre>
<pre>4</pre>
</div>
<div class="code">
<pre>
code
code
code
code
</pre>
</div>
</div>
Setting user-select, -moz-user-select, and -webkit-user-select to none might work. For IE, you will need to handle onselectstart and return false.
This will prevent people from selecting the text, but I don't know what happens when it's beside other text that you attempt to copy.
I know that this question is three years old, but with HTML5 you can store line numbers in a data attributes and use CSS2 to display the text. This should prevent line numbers from being copied.
HTML
<span data-line-number='1' class='line'></span>
CSS
.line:before {
content: attr(data-line-number);
}