I have a page with two different print buttons and two types of div tags:
<button onclick="window.print()">Print Full</button>
<button onclick="PrintPartial()">Print Partial</button>
<div class="not-partial">
Div Content Here should print for "Print Full" but not for "Print Partial"
</div>
<div class="no-print">
This content shouldn't print on either
<div>
I have the following in my print.css file
.no-print { display: none; }
And below is my PrintPartial() function
function PrintPartial() {
var notPartial = $(".not-partial");
notPartial.addClass("no-print");
window.print();
notPartial.removeClass("no-print");
}
The "Print Full" button works just fine and prints according to my print.css file. The div that is hard coded with the "no-print" class correctly does not print.
However the "Print Partial" button print out is exactly the same as the print full button.
When I run my debugger and step into my PrintPartial() function I can inspect the elements and the "no-print" class is getting added to the correct elements. It calls window.print() which opens the print dialog and it removes the "no-print" class from the elements stored in the notPartial variable.
My only thought is the JQuery select and addClass is running asynchronously and its calling print before the class has changed? If so how do I make sure the window.print isn't called until after the addClass is complete.
I tried running it without the removeClass step and got the same results so I know its not my issue, or at least its not my ONLY issue.
Can somebody please tell me what I am doing wrong and how to correct it?
Thanks,
Scott
UPDATE: The above code works fine as Pabs123 pointed out. I had an issue where a different piece of css (not included in this post) is causing the display property to be changed back.
Thanks
Sorry, The code I posted here works as intended. As Pabs123 suggested in his/her comment, I had other conflicting css that was not included with the post, that was changing the display style back from display: none. So as posted this wasn't really a good question. Sorry.
Thanks for your help.
Related
When someone opens the page a <div> gets full width (1200px+). If I reload the page, the width is changed to the right one (550px). The browsers have their cache cleared, so this isn't a cache issue.
First visit:
After refresh:
This is a "custom HTML code" module in a Joomla 2.5 site. This is the code of divs that have their widths swapped:
<div class="art-nostyle">
<div class="custom">
<div id="script_nn_tabs54bfa417561de" class="script_nn_tabs" style="display:none;"></div>
<div id="nn_tabs_container_1____685___" class="nn_tabs_container outline_handles outline_content align_left nn_tabs_container_1_">
<div class="nn_tabs_nav" style="display: block;"></div>
At first sight I thought that the div id="nn_tabs_container_1____685___" was the problem, so I added this jQuery script at the end of the module :
var j = jQuery.noConflict();
j(document).ready(function () {
j("div[id^='nn_tabs_content_1____']" ).css("width","550px");
});
After it failed to fix it, I noticed that the problem was at the <div class="art-nostyle">. That div has no style at all! I can't use the above script for the art-nostyle div because it is added before every single module in the site. Could someone explain how it is possible when this probably isn't a cache issue - an element getting fixed width after a page refresh? I tried it on 5 different PCs that never visited the url before.
P.S. I can't recreate the problem in JSFiddle: that's why I didn't post a fiddle link.
Edit: Link of the site if someone want to check with his own eyes. Its the in middle of the index.
Edit2: I noticed that if i disable cookies the div wont change width after refresh. It will keep the full width.
If you're using jQuery, maybe you could remove the ".art-nostyle" class that may be inheriting weird styles from Joomla. You could give the one <div class="art-nostyle"> a unique ID (e.g. id="navigationLinks"), and then use this:
$(function() {
$("#navigationLinks").removeClass("art-nostyle");
$("#navigationLinks").css("width","550px");
});
You could also check to see if there's any other Javascript that references this div, because it seems weird that the problematic div would inherit the strange behavior just from HTML/CSS.
I had the same issue. However, I have found the answer. Use $(window).load() out instead of $(document).ready().
See also: window.onload vs $(document).ready()
When a user enters the page I would like a div to be in the center with a heading, a quote underneath that is randomly picked from a list and a button to enter the site. This is all well and good but I cannot seem to get the button to fade in the main site and fade out the landing div. Here is a jsfiddle to try and help explain things more.
JSFIDDLE
As you will probably be able to tell, I'm not that great with JavaScript or jquery and what I have done so far is from learning bits and pieces and surfing the web through code examples
I do not see why it will not work as I had a play around in jsfiddle with a simplified version of what I want to do and it worked.
Simplified Version
Below code is simplified version (It wouldn't let me post without adding code?)
HTML
<div class="landingDiv">
<h1>LANDING DIV</h1>
<button id="showMain">Enter Site</button>
</div>
<div class="main">
<h1>Main Site</h1>
</div>
JQUERY
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
CSS
.main {
display: none;
opactiy: 0;
}
Thanks in advanced.
Steve.
The first jQuery example threw an error:
$ is not defined
meaning jQuery is not defined/included. Which it wasn't. But in the second jsFiddle, you included jQuery.
You'll notice that on the left hand side of jsfiddle, you'll see that under the "Framewords & Extensions" heading that you can include a Framewordk - so, include jQuery!
Here is the updated fiddle with jQuery included: http://jsfiddle.net/6cGHF/1/
As you move forward in your JavaScript development, it is always a good idea to check your browsers developer tools for errors when something unexpected is happening. It always helps you, and when you ask questions on StackOverflow, providing these errors help us! :)
The shortcut for developer tools in Chrome is F12 - you can see a little red circle with an X in it if you have errors - click it for more info. But developer tools are also available in other major browsers (except IE8 and below).
Edit:
Wrap your click() event function in a $(document).ready()
$(document).ready(function() {
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
});
What was happening was that your HTML file is read from top to bottom. So it would have reached your click function before the #showMain element had been read. So, jQuery couldn't find it.
The reason this wasn't a problem in jsFiddle was because all the JavaScript code was wrapped in an "onLoad" function (which is, admittedly, a little different to $(document).ready()) but it solved this problem for you by executing your JavaScript after everything had already been loaded. You can see that on the left hand side in the fiddle I linked above, you'll find a dropdown with "onLoad" selected. In it, you can also choose "OnDomready" (which would be equivalent to $(document).ready())
In summary:
DON'T use $(document).ready() in jsFiddle. You don't need it.
DO use $(document).ready() around javascript that relies on the fact that the DOM is ready (ie. "all of your content is visible to your JavaScript").
The problem in your fiddle is you have not added jQuery so when you try and reference it with '$', a javascript error is thrown. Simply add in the reference to a jQuery library and your fiddle works to fade out the button when clicked.
Your problems:
1) Add jQuery library to your fiddle.
2) Remove opacity:0; from .main in your CSS. The display:none; is sufficient.
3) Use this to fade out/in the elements:
$("#showMain").click(function () {
$(".landingDiv").fadeOut(1000, function () {
$(".main").fadeIn(1000);
})
});
Sample Code of my error
So as you can see in the above example, next to where it says "Disclaimer Question111", there is an expand/contract link. The script works halfway, in that the text change occurs, but it does not change the display css for the div its anchored to.
Any idea why? I don't see any page errors.
The code that triggers this is in my site.js file but i pulled it out here so you can see:
$('.accordion-trigger-settings').click(function(){
var target=$(this).attr('href');
if($(target).css('display')=='none')
{
$(target).show();
$(this).text('Collapse Settings');
}
else
{
$(target).hide();
$(this).text('Expand Settings');
}
return false;
});
It applies to this block:
Expand View
<div class="padding5"></div>
<div class="accordionContent" id="accordion-season5160">
<textarea name="str_disclaimer_header5160" id="str_disclaimer_header5160"></textarea>
</div>
Using the Chrome web inspector I see you have two elements with id accordion-season5160. So, the text is changing because it applies to this but the show() method is modifying (showing/hiding) the first element with id accordion-season5160.
Make sure the id is unique.
See the image!
Hope it helps!
Actually you have two <div id="accordion-season5160"...> on the page. One of them is hidden (inside hidden <div class="hide_div">).
You can find them both using console:
document.querySelectorAll('#accordion-season5160')
You will see both of them. To see the element you can right click on it in the console and click 'Reveal in elements panel' (in Chrome)
The best way to solve this issue is to make ids unique. However you can try a quick way to solve the issue that does not require uniqueness of ids:
Replace
var target=$(this).attr('href');
with
var target=this.nextElementSibling.nextElementSibling;
JS Bin http://jsbin.com/itucop/1/edit
I can't understand why this inner html script isn't working. I posted the javascript on jsFiddle. You can see it here: http://jsfiddle.net/JyV73/1/
I have two versions of the link. In the first the rewrite link is within a popup that needs to be closed and another opened with the proper text within the textarea.
In the second, there is just a link on the page that when it is clicked should hopefully open the popup with the proper text within wht textarea.
The only problem is that it doesn't work for the second version because of I must close the popup. If I comment out that first document.getElementById(id).style.display = 'none' then the plain link works, so my first thought is to create two function. But since this javascript is part of a php template file that is included I think it would be simpler on the php code to just solve this using pure javascript.
I'm still learning javascript, and any help would be appreciated. I hope I was clear. Thank you so much.
HTML
open
<div id="popup" class="popup"> Rewrite
</div>
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
<!-- This is the stuff that doesnt work for some reason Rewrite
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
-->
The Javascript
function rewrite(id, text) {
document.getElementById(id).style.display = 'none';
document.getElementById('new-text').innerHTML = text;
}
I am not entirely clear on what you are trying to do here, but from the way I read your code you want to set the value of the text area to a specific value.
here is how you do that: http://jsfiddle.net/JyV73/9/
function rewrite(id, text) {
$('#new-text').val(text);
}
You're not using pop-ups, you're using modals, which means its' a div inside the page that toggles visibility. You can access information from those components whether they are visible or not, fyi.
Still, Im not entirely sure on what you're trying to do here.
I changed document.getElementById('new-text').innerHTML = text; to document.getElementById('new-text').value = text; because it's the value attribute of the text box which you want to set.
Also each element on the page with an ID needs to have a unique ID (it seems like you might have been trying to reuse IDs at one point but maybe I'm wrong!)
I still haven't worked out exactly what you're trying to achieve but those changes needed to be made no matter what.
This code is sufficient to achieve your second goal though: http://jsfiddle.net/JyV73/19/
I added an onClick attribute (onClick="rewrite('popup', 'blah')") to your "open" link to do the writing to the textbox. :)
i have a jQuery code and the html code on my page. The code loads two php files on two DIVs, based on the value of a drop down list. The code is working great, loading pic and everything. However I have a small problem.
When I place the second div ( artistdetails ) inside of a seperated div from the first div, the loading pic does not appears on the second but only in the first. Content is appeared correctly though.
As I saw in firebug, the class is loading fine. I even changed the picture to something bigger but nothing was there. ( I mean the pic is not hidden somewhere).
I made a lot of experiment, I set the ID to the float:left div but nothing happens. I really need to have them in a separated DIV. Is that possible?
I would start looking at the final generated code (which you might post here or on pastebin.com with a link).
Sounds to me like something in the php forms is probably not generating valid html. For example, an unclosed entity.
It must work, i guess, if the class is added to <div id="artistdetails"></div>
Still try something like this
$('#artistdetails').empty()
.addClass('loading')
.load('forms/' + val + 'b.php',
function(){
setTimeout(
function(){ $('#artistdetails').removeClass('loading') },
2000);
});