Running into an interesting browser problem -- I've implemented jQuery to toggle a page's stylesheet link href, on click of a button, between a normal view css file and a print-friendly css file. It works, except that when the viewer goes to the print-friendly version, I call window.print() after the new link href has been applied. The print preview automatically comes up, and in the preview, certain elements that should have display:none in the print-version are visible. If you click "print", then the print comes out screwed up, just like the preview. If you cancel the print, then the page on screen is still in print-friendly mode, but everything is fine and nothing is visible that shouldn't be. And if you then right-click and select "Print..." the preview displays as it should, and everything prints as it should.
This has to be a browser thing, because it's only happening in Chrome, not in FF.
This is the function that gets called whenever the button is clicked:
$('#printOnlyBtn').click(function(){
if ($('#mainStylesheetLink').attr('href') == 'normal.css' {
//switch to print-friendly css file and print
doPrint();
}
else {
//switch back to normal css file
$('#mainStylesheetLink').attr('href', 'normal.css');
}
});
function doPrint(){
$('#mainStylesheetLink').attr('href', 'printFriendly.css');
window.print();
}
One solution is to take out the call to window.print(); just put the page in print-friendly mode with one button, and then have another button the user must click to actually print the page. But I'd prefer to keep it a one-click process if possible.
I'd recommend abandoning your approach of linking to a css file. Instead, try using a #media print { ... } declaration in your css. Include your print-specific styling within this block. There's great documentation at https://developer.mozilla.org/en-US/docs/Web/CSS/#media.
I solved the problem just using setTimeout(). I figured there's a race condition or something like that, so I just delayed the call to window.print() by 100 ms:
function doPrint(){
$('##mainStylesheetLink').attr('href', '#printFriendly.css');
setTimeout(window.print, 100);
}
I actually tried that before, but I coded it as below, forgetting that the code to be executed after delay needs to be passed into setTimeout() as a callback function without the parens, else it gets called immediately:
setTimeout(window.print(), 100);
Related
I have a simple javascript program that runs onclick of an image.
However, whenever I clicked the image, the page reloaded.
After a lot of debugging I found that the page doesn't reload until right as the script completes.
There are several setTimeouts in the code, but I noticed the page was reloading instantly. I even changed these timeouts to 15000 milliseconds, but it still reloads immediately.
I am using jquery, if it makes any difference.
I also want a different result from the program every time you click it, so that each time you click it a different script runs and a some text changes in a specific order. I did this by changing the onclick attribute of the images in each script to the name of the next script, so that script one would switch onclick to script two, and so on. I set a timeout on these switches so that one click doesn't race through every single script. script two isn't running, so that much works.
my code:
function getSounds() {
console.log("script. initiated");
$("#soundwebGetSoundDirections").html("Now, Wait until the file is done downloading and click below again.");
console.log("new message");
$("#soundwebGetSoundA").attr('href',"");
console.log("href eliminated");
setTimeout($("#soundwebGetSoundImg").attr('onclick','findFile()'),2000);
console.log("onclick to findFile()");
}
function findFile(){
console.log("FINDFILE")
$("#soundwebGetSoundDirections").html("Find the file(it's probably in your downloads), copy the path of the file (usually at the top of the file explorer) and paste in it the box below. Then, make sure there is a '/' at the end of the path and type 'Linkiness.txt' (case sensitive, without quotes) at the end. Once you have all that stuff typed, click the icon again.");
console.log("FIND IT, DARN IT!!");
$("#soundwebGetSoundPathInput").css("opacity",1);
console.log("diving into reader");
setTimeout($("#soundwebGetSoundImg").attr('onclick','readFile()'),1000);
}
function readFile(){
console.log("loading...");
$("#soundwebGetSoundDirections").html("loading...");
if(document.getElementById("soundwebGetSoundPathInput").value.length == 0){
setTimeout($("#soundwebGetSoundDirections").html("Please fill in Path!"),1000);
setTimeout(findFile(),2000);
}
}
and the HTML that's linked to,
<a id = "soundwebGetSoundA" href = "https://docs.google.com/feeds/download/documents/export/Export?id=1ynhHZihlL241FNZEar6ibzEdhHcWJ1qXKaxMUKM-DpE&exportFormat=txt">
<img onclick = "getSounds();" class = "soundwebImgResize" src = "https://cdn3.iconfinder.com/data/icons/glypho-music-and-sound/64/music-note-sound-circle-512.png" id = "soundwebGetSoundImg"/>
</a>
Thanks for any help,
Lucas N.
If you don't want clicking the image to cause the anchor tag to load the href, then move the image tag outside of the anchor tag.
You aren't using setTimeout correctly. You should be passing in a function not a statement. So, for example, instead of
setTimeout($("#soundwebGetSoundDirections").html("Please fill in Path!"),1000);
setTimeout(findFile(),2000);
you should use
setTimeout(function () { $("#soundwebGetSoundDirections").html("Please fill in Path!") },1000);
setTimeout(findFile,2000);
I think the same goes for setting the onclick attribute but I've never tried dynamically changing an onclick attribute like that.
Since you're already using jQuery you could try using .on('click'... and .off('click'... if your current setup isn't working.
I am using Popup.js by Toddish.
http://docs.toddish.co.uk/popup/demos/
Long story short, the popup plugin creates divs by default given the classes ".popup_back" and ".popup_cont".
I have another button I wish to press which should completely delete the added divs with those classes after they have been generated and added to the html. As if they never even existed. Surely this is possible?
I have tried running a function which simply runs:
$(".popup_back").remove();
$(".popup_cont").remove();
As shown in this example:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove
Unfortunately despite the code running, the actual divs are never deleted as required.
Any ideas? I am new to this kind of thing and have googled around and read a lot about DOM etc but am yet to crack it.
Thanks
EDIT:
In reply to the comments:
The Javascript:
function removePopups() { // This function is called to remove the popups.
console.log("removing...");
$(".popup_back").remove();
$(".popup_cont").remove();
}
function func(url) { // url is the url of the image to be displayed within the popup.
removePopups(); // As soon as the function casillas is called, removePopups is used to remove any existing instances of the divs.
$('a.theimage').popup({ // This is where the Popup plugin is utilised.
content : $(url),
type : 'html'
});
}
The HTML:
<a class="theimage" onclick="func('image/image1.jpg')" href="#" >
Long story short, an image is displayed in the popup.
I think the issue is that the popup plugin runs due to the class but the function func is never actually run when the click occurs. However simultaneously "removing..." still prints out in the console which tells me that the function IS being executed. The problem is I want the popup plugin to run together with the javascript function. Is there a solution for this conflict?
Your implementation should really be as simple as this:
<a class="theimage" href="#" >Open</a>
Bind the popup creation to your popup link:
$('a.theimage').popup({
content : 'image/image1.jpg',
type : 'html'
});
I'm speculating here, but what might be happening is that you're invoking the popup twice by binding the popup() call to a click handler in your markup. The popup plugin already binds the popup creation to a click event.
View working demo. Note the 3 external resource: the popup CSS, the popup JS, and the jQuery JS.
I have used the '#media only screen' in my CSS to determine how and what information should be shown depending on the users screen size. I have a class called panelContainer which is set to display when the screen is greater than 767px, and a class called mobileContainer which displays when the screen is less than that.
I have a couple of custom controls, one that contains the standard form layout and another that contains the mobile device form layout. Originally I placed a div around each with the appropriate styleClass. The problem with it this way was that although only one form is visible, they were both loaded so this caused save issues.
<xp:div id="panelContainer" styleClass="panelContainer">
<xc:content_sCompany></xc:content_sCompany>
</xp:div>
<xp:div id="mobileContainer" styleClass="mobileContainer">
<xc:content_iCompany></xc:content_iCompany>
</xp:div>
I have since added a div to my Xpage with the styleClass of panelContainer, I then added onLoad and onResize events which return the style.display of the div, these should then write the result to a viewScope. But I found it would only write onLoad and although the function was being called onResize it wouldn't change the viewScope variable.
<xp:scriptBlock id="scriptBlock1" type="text/javascript">
<xp:this.value>
<![CDATA[var init = function() {
obj=document.getElementById('formType');
if(getStyleDisplay(obj)=="none"){
formType='#{javascript:viewScope.put("formFormat","mobile");}';
}else{
formType='#{javascript:viewScope.put("formFormat","standard")}';
}
}
dojo.addOnLoad(init);
dojo.connect(window,"onresize",init);
function getStyleDisplay(obj) {
if(obj.currentStyle) { // IE – Opera
return obj.currentStyle.display;
} else { // firefox
return getComputedStyle(obj,'').getPropertyValue('display');
}
}]]>
</xp:this.value>
</xp:scriptBlock>
<div id="formType" class="panelContainer"></div>
.....this viewScope variable is then used in the following way:
<xc:content_Company xp:key="ContentControl">
<xp:this.facets>
<xc:content_sCompany id="content_sCompany"
xp:key="standard">
</xc:content_sCompany>
<xc:content_iCompany id="content_iCompany"
xp:key="mobile">
</xc:content_iCompany>
</xp:this.facets>
</xc:content_Company>
.....extract from content_Company......
<xp:callback facetName="#{viewScope.formFormat}" id="cbkCompanyFormContent">
</xp:callback>
I feel this is the better way to achieve the result I need, as when I have tried it manually it does only load one of the forms and they work as expected.
I cannot see why the viewScope is not being set properly, it is always being set to 'standard', even if I shrink my page before loading the page. I did try writing the value to a Hidden Input, which worked but whenever I tried to access the value using getComponent("hiddenInput1").getValue() it would return null, even though I could see that value had been set when viewing in firebug.
Ok can you check (or tell me if you already have) through some console.log("") 's that the onResize is being called and the correct display is being pulled down etc.
next it may be firing the onResize but are you then partail refreshing the area which is using the viewScope?
Code example of this: (replace controlID with yours)
XSP.partialRefreshGet("controlID", {
onError: function() { console.log('Error'); }
});
I'm a little confused about what the purpose of using onResize is for ? if is to decide what to show whether on mobile or normal screen there are much more efficient ways of doing this.
Using the new redirect control in the latest release of the ExtLib on openNTF. It does exactly what the name suggests and redirects based on certain expressions. leaving you to drop it on a page and say if mobile (or whatever) redirect to this page.
Having a dummy default load page that checks the useragent string to see which page to load (having a separate mobile / fullscreen pages). This is what the teamroom template application that comes with the ExtLib does with its main.xsp and then this is set as the default launch option.
Or if you are trying to do something with whether the phone / tablet is on landscape or portrait you should be using the onOrientationChange event not onResize. check out this example (not the code in the question is what I'm pointing you too, he has a problem getting that to work in a webview):
how to handle javascript onorientationchange event inside uiwebview
I have a problem where an element is not showing on Opera nor Firefox. Using firebug on Firefox I could see that an error saying that a function I use to initialize the code 'is not defined'
Now here's the thing, when I empty the cache on the Firefox browser, I can see my element which contains a "facebook button" and the error is gone, but once I refresh the browser I can't see my element and returns the error again. I would have to empty out the cache in order to see the button once again.
The element is supposed to be triggered with jQuery to show if a facebook user is online, and if not it will show that button. But this is only working on Chrome & Safari, and I believe on IE8 (which i don't have) but someone told me it worked.
This is the code to show the element on my Javascript file:
jQuery('#fbLogin').show();
Now, if i was to change this on my .css file:
#fbLogin {
display:none;
}
to this:
#fbLogin {
display:block;
}
it will display, but the problem i saw was that it showed all the time, and this needs to be hidden if the user is logged in. I basically have a code that says .show the button and .hide if logged in...
here's a link to a page if you want to take a look further:
http://gullypost.com/entertainment/tim-westwood-kendrick-lamar-interview/
On Safari & Chrome you will notice that the facebook button shows up on the right sidebar, but not visible on the other browsers.
Can someone help me solve the problem to this? Thanks.
There's a weird problem when using jQuery when trying to use .show() on an element that doesn't have a defined height. The fix is to set the height either explicitly or dynamically.
$(selector).height(function() { return $(this).height() });
It looks like the second time the page loads, you're getting the following JavaScript error:
fb_og_actions_init_vid is not defined
The file that contains the function is being added to the page correctly. My only guess would be to try and move the reference to the function:
fb_og_actions_init_vid("Connected to Facebook", "108821");
To within a document.ready function:
$(document).ready(function(){
fb_og_actions_init_vid("Connected to Facebook", "108821");
});
I believe this will work:
document.getElementById('fbLogin').style.display = 'block';
I currently have a page that is being resized through the use of javascript whenever the end-user resizes the window, so that scrolling is reduced or eliminated when not necessary. I have a loader.js jquery file which picks out .html documents to throw in to the content section of the page when the user selects an option from the left menu:
$("#response").load("home.html");
$("#home").click(function(){
// load home page on click
$("#response").load("home.html");
setTimeout("resizefunc()",500);
});
$("#about").click(function(){
// load about page on click
$("#response").load("about.html");
setTimeout("resizefunc()",500);
});
//etc
While these timeout functions work most of the time, they have the potential to fail if the page loads abnormally slow for any reason. I am using document.ElementId.scrollHeight to determine the height of each new page, but it seems to only detect the height after the changes have been correctly applied. If the javascript loads before the page content then the resize fails.
It seems that if I were using complete html documents for each page then the problem would be irrelevant. I could put an onLoad event in to the body of each one and have it resize there... But since the tag is only loaded once I'm somewhat at a loss. My current implementation "works", but I feel that there should be something more efficient.
Don't use onLoad, instead wrap your code in
$(window).load(function() {
// your code here
});
Also, instead of load() with just the filename as a parameter, use:
$('#response').load('file.html', function() {
resizefunc();
});
Along with "load" you could also use "resize" as one of the events. This would allow dynamic resizing.
$(window).resize(function() {
resizefunc()
});
function resizefunc()
{
// code to resize.
}
See: http://api.jquery.com/resize/