I have a page with many links. and Have a button to print, clicking on that will be print.css included. In print preview version of the page remain all the links intact.
Is there a way to disable all the link in print preview? i.e. they are no more clickable.
I know this isn't disabling the links, but this is along the lines of print preview and links. Here's an option that you can add to your css so links will print much nicer: http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url
I wouldn't disable the links as much as style them the same way as regular text, since the intent of clicking on Print Preview is to prepare to print the page, where the links won't work anyway.
If you're still set on disabling links, you can try this query code. Assume that your body has a class called print on it:
$("body.print a").each(function(a) { $(a).html(a.innertext); });
The above is pseduocode and was off the top of my head at 8:30 AM. I would just save yourself the trouble and make links look like surrounding text.
Related
I am trying to debug a Wordpress issue where a is being auto inserted before the end of the <script> tag, hence breaking the javascript.
If I view the element with the inspector, I can see a as shown below:
However if I viewsource, or download the html page and look at it, there is no :
});
});
setTheRepeaterButton();
});
</script></p>
At first i thought it was a chrome bug, but I get the exact same behaviour in firefox.
I would think there is no , however the script is broken which implies there is one. Which is correct, the inspector or the page source?
It looks like there is a hidden/invisible character before the final } in the script. Depending on your code editor, you can toggle a setting to view hidden characters or add a plugin (e.g. nbsp-vscode for VS Code).
Or the easiest solution is to delete the space between that } and the preceding ; and redo the code formatting.
I'm new in web development and this is also my first question here, so I hope I am precise enough.
What im trying to achieve is to have a text editor on a webpage, that of course can insert and edit text but also is able to insert blank guitar tablature, that can be edited by mouse- and keyboard events and save all the html content to a collection (Like create and save guitar notesheets).
The text thing is already working, I can save content to my collections or can show the collections content inside the editor, but I have some problems with the guitar tab inserts.
I'm using Meteor with the following packages:
brentjanderson:kinetic,
fortawesome:fontawesome,
froala:editor,
iron:router,
less,
meteor-platform,
nemo64:bootstrap,
peppelg:bootstrap-3-modal,
twbs:bootstrap
I want to use kineticjs for the guitar tab thing, because it is able to draw the blank tabs easily and access its content (for the editing I want to do).
For test purpose I just started to add a new kinetic stage with 2 layers (one for the guitar tab lines and one for the text) statically to an empty html page and it worked as it should. here is a fiddle:
https://jsfiddle.net/dsrbhayd/
But if I want to use kinetic in conjunction with the froala editor's "insertHTML" function by inserting the kinetic div via custom button inside the editor I have the following issue:
The div and canvas is inserted normally like on the html page above without the editor, but a few seconds later the content of both layers (var "text" and the horizontal lines, see fiddle) disappears. If I insert any text by typing something with the keyboard, right after I inserted the kinetic div, the content disappears immediately.
If I switch to see the HTML code inside the froala editor (with the "show HTML" button in the toolbar) I am still able to see the inserted kinetic div and canvas elements, but it seems the content of the layers is "gone".
Here is another fiddle with the editor issue:
https://jsfiddle.net/un8sbrzd/
I worked on it for days but I cant get it. I tried to change some of the froala editors options (like I mentioned in the comments of the fiddle) but it didn't work.
Is it a kind of a refresh issue of the editor? Does anyone have some experience using kinetic inside a html editor?
It would be awesome if someone can help me.
Greetings
The title says it all, how would I make it using only html, no JAVASCRIPT, to stop the page from jumping back to the top if a user clicks on an empty tag? So for example, if at the very bottom of my site, I have a link that is empty, but click on it, it takes be clear back up to the top...
A simple solution to this would simply put in the a tag:
Title
In doing this, it won't scroll your page back to the top. To have it scroll back to the top, take out the a after the # symbol...so it would look like this:
Title
That is the best explanation I can give you without any code provided from you.
Give that a try and it should work with what you are asking for...No javascript is needed. In fact you can even make the #a jump to a different location if you'd like on your page :)
UPDATE:
This may suit you better! Add this to either a js file or add it inline with you html document.
Separate js file (just make sure to call it externally on your html file):
$('#Add_Your_Id_Or_Class_Here').removeAttr('href');
Example: $('#link a').removeAttr('href'); or $('.link a').removeAttr('href'); or even $('a').removeAttr('href');
Now, if you want to achieve this via inline on your html file, simply do this:
<script>
$('#Add_Your_Id_Or_Class_Here').removeAttr('href');
</script>
Again, you can use any of the examples above as well. In fact there are many ways you can achieve this now that I think about it...Hope that helps :)
If your link isn't supposed to be linked (such as when it's just a placeholder for where a link could be) then you should not add an [href] attribute to the <a> element
I'm using Lightbox for the first time, and it's working for my images. However, for some reason, I get a strange box at the end of my page that shows the loading icon, even though there shouldn't be an image there.
The image: http://i.imgur.com/ACImB.png
Upon inspecting the element, I get the following HTML code.
<div id="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image"><div class="lb-nav"><a class="lb-prev"></a><a class="lb-next"></a></div><div class="lb-loader"><a class="lb-cancel"><img src="/z/styles/images/loading.gif"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"><img src="/z/styles/images/close.png"></a></div></div></div></div>
The strange part about this code is that I didn't make that div, it seems to have just been inserted by the script. Does anyone know what this might be and how to get rid of it?
This could easily be a problem with your css or script path.
If you look at the lightbox2 demo it displays that loading page you see and then removes it to display the loaded image. When either the javascript or stylesheets are not correctly linked it will not work properly.
Lightbox2 site: http://lokeshdhakar.com/projects/lightbox2/
You can try using (in chrome, for firefox there's firebug) right-click inspect element, go to the resources tab and expand the frames boxes until you see all the images, scripts and style sheets in a list. It'll let you know if one of them can't be found.
I had the same issue when I integrated Lightbox with an MVC site. The issue was I had referred both lightbox.js and lightbox.min.js files. I fixed the issue by removing one reference.
I'm creating a hidden iframe specifically to be used for printing in IE6.
Here's a basic outline of the code with some HTML population cut out:
$('body').append('<iframe id="printIFrame"></iframe>');
$("iframe#printIFrame").attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
$("iframe#printIFrame").load(function()
{
document.getElementById("printIFrame").contentWindow.document.title = "My Title";
var iframe = document.getElementById("printIFrame");
iframe.contentWindow.focus();
iframe.contentWindow.print();
$("iframe#printIFrame").remove();
});
This is working quite well, except for the ugly "about:blank" that shows at the bottom left hand of each printed page. I guess since I'm making this iframe on the fly the source (as IE6 sees it) is about:blank. Is there any way to fake the src or change what gets printed there? I tried setting the src right before printing, but obviously that changes the iframe to a new page and prints that. Any ideas?
You can not get this done without changing the src ahead of time, like you described. This is IE we're talking about. It's the single browser least likely to support anything fancy it could get away with not supporting.
(Though, for the record, I haven't heard of being able to override print metadata in any other browser, either.)
I did find an ActiveX plugin which claims you can modify the header/footer of the printout on the fly.
http://www.meadroid.com/sx_intro.asp
Alternatively, it can be changed permanently by going to Page Setup from the File menu in IE6. However I'm trying to avoid an ActiveX plugin if possible; I'm wondering if there is an easy way to change the header or footer through javascript. Any other ideas?