Develop Reference

How to return a div in <a href> with javascript?

I have this code on a page:
Потолок +
I need my code to show a div just like in '1'. '2' - how it should be BEFORE the click.
So I need to popup of div 'remont_price_link' when user click on
This one doesn't work:
Потолок +
Sorry for silly.

Add this tou your script:
$(".remont_price_link").click(function() {
var parent = $(this).parent();
var spoiler = $(this).closest(".remont_price_item").find(".spoiler-text");
if(parent.hasClass("folded")) {
parent.removeClass("folded");
spoiler.show();
}
else {
parent.addClass("folded");
spoiler.hide();
}
});
And keep the links as they are. Like this:
Потолок +

You can show/hide your div using css 'display' and javascript.
See code here: https://codepen.io/cpenarrieta/pen/XpoExe
CSS
.hidden {
display: none;
}
.show {
display: inherit;
}
Javascript
function showDiv() {
var x=document.getElementById("divId");
if (x.classList.contains("show")) {
x.classList.add('hidden');
x.classList.remove('show');
} else if (x.classList.contains("hidden")) {
x.classList.add('show');
x.classList.remove('hidden');
}
}
HTML
<a href='javascript:;' onclick='showDiv();'>Потолок +</a>
<div id="divId" class="hidden">
div content
</div>

Proper way to dynamically change css properties?

I have site that, in response to user interaction, dynamically creates divs using jquery. The div will have a span inside containing a timestamp to show its creation time, and the user can click a button to show or hide the timestamp span.
I ran into the issue of, when the user selects to hide timestamps, how do you prevent future dynamically added spans from showing? In reference to this question Create a CSS rule / class with jQuery at runtime, I added a style tag in the head dynamically. However, I also intended to allow the user to be able to choose a font from a drop down list and change the font style of the text inside the divs. Following this method now seems like it would create a lot of overhead.
Both issues revolve around the same issue: change already existing element and any future dynamically created matching element's css style, but I'm not sure the method mentioned above is really the best solution?
EDIT: SNIPPET
$(function() {
$('#add').click(function() {
$('#display').append("<div><span class='time'> ex. Timestamp</span> Div text contents...</div>");
});
$('#hidetime').click(function() {
$(this).text(function(i, text) {
if (text === "Hide Time") {
$("<style>").prop("type", "text/css")
.html(".time {display: none}").appendTo("head");
return "Show Time";
} else {
$('style').remove();
return "Hide Time";
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='add'>Add</button>
<button id='hidetime'>Hide Time</button>
<div id='display'>
</div>

You've provided no code to debug, but the way you can do this is to toggle a class such as notimestamps on the container element for the whole thing.
Then in your main CSS code you can simply do something along the lines of:
.container.notimestamps span {
display:none;
}
If you're changing font styles, you can do something very similar.
Example:
.container.font-arial {
font-family: arial, sans-serif;
}
.container.font-tahoma {
font-family: tahoma, sans-serif;
}
Using your recently added example you would change it to:
$(function() {
$('#add').click(function() {
$('#display').append("<div><span class='time'> ex. Timestamp</span> Div text contents...</div>");
});
$('#hidetime').click(function() {
$('#display').toggleClass('notimestamp');
});
$('#font').change(function() {
$('#display').attr('data-font', $(this).val());
});
});
#display.notimestamp span {
display:none;
}
#display {
font-family:sans-serif;
}
#display[data-font="arial"] {
font-family:Arial;
}
#display[data-font="georgia"] {
font-family:Georgia;
}
#display[data-font="tahoma"] {
font-family:Tahoma;
}
#display[data-font="tnr"] {
font-family:"Times New Roman";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='add'>Add</button>
<button id='hidetime'>Hide Time</button>
<select id="font">
<option value="arial">Arial</option>
<option value="georgia">Georgia</option>
<option value="tahoma">Tahoma</option>
<option value="tnr">Times New Roman</option>
</select>
<div id='display'>
</div>

You can achieve it using plain javascript
Here is an example. You can add any similar styles dynamically
HTML
<div id="myDiv" style="margin: 50px 50px 50px 50px">This is a div.</div>
<br />
<button type="button" onclick="removemargin()">remove margin</button>
<button type="button" onclick="removeLeftMargin()">remove leftmargin</button>
<button type="button" onclick="removeTopMargin()">remove topmargin</button>
<button type="button" onclick="addCssMargin()">add margin by adding class (dominant here)</button>
CSS
#myDiv {
background: #EEE;
}
.myclass{
margin : 100px 10px 15px 50px !important;
background:red !important;
}
JAVASCRIPT
function removemargin() {
document.getElementById("myDiv").style.margin = "0";
}
function removeLeftMargin() {
document.getElementById("myDiv").style.marginLeft = "0";
}
function removeTopMargin() {
document.getElementById("myDiv").style.marginTop = "0";
}
function addCssMargin() {
var d = document.getElementById("myDiv");
d.className = d.className + " myclass";
}
JsFiddle

How to override standard browser print and print an iframe by default

I have a documentation type page with an iframe inside. I'm trying to override standard browser print (Ctrl + p) to print contents of an iframe only.
I know how to print an iframe content using javascript:
window.frames['webcontent'].focus();
window.frames['webcontent'].print();
I know how to do run javascript before printing e.g. as described here: Check for when a user has selected to print using javascript
Any advise?
Thanks

It can be easily achieved through CSS: See thisJSfiddle: Tested
<style>
#media print{
body * {display:none;}
.toPrint{display:block; border:0; width:100%; min-height:500px}
}
</style>
Let an HTML File be:
<body>
<h3>I do not want this title Printed</h3>
<p> This paragraph should not be printed</p>
<iframe class="toPrint" src="http://akitech.org"></iframe>
<button onclick="window.print()">Print</button>
</body>

It's not possible (using Javascript). There is some experimental support for user-initiated print events in modern browsers, but those are not cancelable ("simple events") so the entire page will still print even if you interject custom code to print the frame of interest.
Given this limitation, your best bet is probably to offer users a large button that fires your custom frame printing function (see printContentFrameOnly below, fire it without arguments) and hope that they'll use the button instead of ctrl-p.
If it would be possible, this would be the way to do it (based on this answer):
// listener is a function, optionally accepting an event and
// a function that prints the entire page
addPrintEventListener = function (listener) {
// IE 5.5+ support and HTML5 standard
if ("onbeforeprint" in window) {
window.addEventListener('beforeprint', listener);
}
// Chrome 9+, Firefox 6+, IE 10+, Opera 12.1+, Safari 5.1+
else if (window.matchMedia) {
var mqList = window.matchMedia("print");
mqList.addListener(function (mql) {
if (mql.matches) listener(); // no standard event anyway
});
}
// Your fallback method, only working for JS initiated printing
// (but the easiest case because there is no need to cancel)
else {
(function (oldPrint) {
window.print = function () {
listener(undefined, oldPrint);
}
})(window.print);
}
}
printContentFrameOnly = function (event) {
if (event) event.preventDefault(); // not going to work
window.frames['webcontent'].focus();
window.frames['webcontent'].print();
}
addPrintEventListener(printContentFrameOnly);

The idea is to set the iframe content somewhere on the page, and print ONLY that content, by hiding the original content.
This can be done by getting the iframe content when Ctrl+P event is being initiated (via JavaScript), and print only its content (via CSS #media type).
HTML Code:
<div id="dummy_content"><!-- Here goes the iframe content, which will be printed --></div>
<div id="content_wrapper">
<div id="current_content">Current Content that the user see<div>
<iframe id="myIframe" src="iframe.html"></iframe>
</div>
CSS Code:
#media screen {
#dummy_content {
display:none; /* hide dummy content when not printing */
}
}
#media print {
#dummy_content {
display:block; /* show dummy content when printing */
}
#content_wrapper {
display:none; /* hide original content when printing */
}
}
JavaScript Code:
var dummyContent = document.getElementById("dummy_content");
function beforePrint() {
var iFrame = document.getElementById("myIframe");
dummyContent.innerHTML = iFrame.contentWindow.document.body.innerHTML; // populate the dummy content (printable) with the iframe content
}
document.onkeydown = function(e) {
if (e.ctrlKey && e.keyCode == 80) {
beforePrint();
}
}

You can define a css file for printing:
#media print {
* { display: none; }
iframe { display: block; }
}
EDIT
Mybad didnt tested it.
* { display: none; } is somehow overwriting all
But this is working like a charm
http://jsfiddle.net/c4e3H/
#media print {
h1, p{ display: none; }
}

The only way i can think of is hiding all the content in the document except for the iframe and making it fit the whole document.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
body.hide *, body #backdrop
{
display: none !important;
}
body.hide #my_print_iframe, body.hide #backdrop
{
background: white;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 0;
width: 100%;
height: 100%;
display: block !important;
}
#media print {
body.hide #backdrop
{
display: none !important;
}
}
</style>
<script>
$(document).on('keydown', function(e){
if (e.keyCode == 80 && ( e.metaKey || e.ctrlKey ) ) {
$("body").addClass('hide');
setTimeout(function(){
$("body").removeClass('hide');
},1000)
}
})
</script>
</head>
<body>
<div>
this is some visible text
</div>
<iframe id="my_print_iframe" src="//example.com"></iframe>
</body>
</html>
I used timeout ( nasty i know ) because at least chrome 38 does not send the keyup event after ctrl+p

Hi might be this code will help you..
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'printMe', 'height=400,width=600');
mywindow.document.write('<html><head><title>Print Me</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
and call the function PrintElem('iframe') on you page.

How to toggle two images onClick

I'm making a collapsible treeView.
I made it all, I just need my + and - icons to toggle whenever they are clicked.
I did the part when I change an icon from + to -, on click, with jQuery with the following code:
$(this).attr('src','../images/expand.gif');
Problem is, I don't know how to make it go other way around, when i click on the node again :)

This should work:
<style>
.expand{
content:url("http://site.com/expand.gif");
}
.collapse{
content:url("http://site.com/collapse.gif");
}
</style>
<img class="expand">
<script>
//onclick code
$('img.expand').toggleClass('collapse');
</script>

Look for jquery function toggleClass :)
http://jsfiddle.net/Ceptu/
Html:
<div id="box">
Hello :D
</div>
Jquery:
$("#box").click(function () {
$(this).toggleClass("red");
});
Css:
#box {
width: 200px;
height: 200px;
background-color: blue;
}
.red {
background-color: red !important;
}
Remember that !important is realy important!!!
Lots of ways to do this :D

I wanted to do this without making classes. Inside your click event function, you could do something like this:
if($(this).attr('src') == '../images/collapse.gif')
$(this).attr('src', '../images/expand.gif');
else
$(this).attr('src', '../images/collapse.gif');

add plus as a default img src then define a minus-class to change the image source to minus image
$("selector_for_your_link").click(function () {
$(this).toggleClass("minus-class");
});

How change selector for spoiler?

I'm trying to change a spoiler but i have problem with javascript code
This is the spoiler:
http://nathan3000.altervista.org/Jdownloader%20Spoiler/zzzz.html
When i click the image "MAC" the spoiler opens. When i click again MAC the spoiler closes. But when i click between the text the spoiler closes again. I do not want the spoiler closes when I click in the middle of the text but only when i click image "MAC". How can i do change selector so it only show/hides when i click the image?I'm still clicking inside the .OS container
I don't understand why the table border doesn't appear on online version while on local version I can see the borders of tables.
The javascript code for spoiler is this:
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(this).find(".details").is(":visible"))
{
$(this).find(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(this).find(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
Thanks in advance

This is working:
$(document).ready(function(){
$(".nonjs").removeAttr( "href");
//href is needed for users without JS
$('.OS').click(function(e){
if(!$(e.target).parents('.details').length){
if($(this).find('.details').is(":visible"))
{
$(this).find('.details').not(":hidden").hide("slow");
return true;
}
else
{
$(this).find('.details').show("slow");
return false;
}
}
});
});

put your spoiler/ popdown menu directly after your .OS image. right now your popdown is a child of the .OS container, so clicks on it are passed to the .OS click handler.
here is something like you want:
http://tempesthostingservices.com/t/zzzz.html