We make newsletters using the mailchimp service for a customer, now our customer would like to print the webversion of the mailings, but without the mailchimp top bar (#awesomebar).
Is there a plugin or something for firefox or chrome that can prevent an div from printing and that is easy to use for a non-technical person? So firebug is not an option.
I allready tried to contact mailchimp about it, but they won't change the print css.
Why not just disable the awesomebar in the first place?
If not, just use some custom CSS in your template. Add the class noprint to any elements they don't want printed, and then in your custom CSS, add below:
<style type="text/css" media="print">
.noPrint, #awesomebar {
display:none !important;
}
</style>
If this doesn't "exactly" work for you, hopefully you can use it as a starting point. The media="print" tag only applies when the browser goes to print - it doesn't affect the display of the page normally.
Related
Is there a way to use an iframe, but still have the address bar change when clicking what's inside the iframe to what the page actually is? I want to have a horizontal bar at the top of the page with a music player that allows music to play while browsing the site. But I also want people to easily be able to bookmark the pages as well.
I've searched, but can't find the answer. Many are just looking to change what URL is loaded in the iframe...that's not what I want. I want the actual address bar displayed in the browser to update.
This sentence is here to help me reach the 30 character minimum. Ignore this and read the next sentence for your answer:
No.
UPDATE:
"Changing" and "Redirecting" are two different things. You need to clarify which it is. "Changing" the address bar is impossible.
"Redirecting" IS possible.
Clicking on a standard link from within an iframe will not affect the topmost window on its own. A quick example of a Javascript redirect within an iframe would be something like this:
TOP WINDOW:
<html>
<head></head>
<body>
<iframe src="http://yoursite.com/iframe_test.html" />
</body>
IFRAME TEST:
<html>
<head>
<script>
window.onload = ready;
function ready()
{
document.getElementById("link1").onclick = linkClick;
document.getElementById("link2").onclick = linkClick;
}
function linkClick(e)
{
e.preventDefault();
window.top.location.href = this.href;
}
</script>
</head>
<body>
<a id="link1" href="http://youtube.com">Link1</a>
<a id="link2" href="http://facebook.com">Link2</a>
</body>
EXPLANATION:
Without the Javascript in place, what will happen when you click on a link in an iframe is that you will remain on the original page and the iframe will be redirected to the link you've clicked on. Using Javascript within an iframe in this fashion can force the topmost frame to redirect.
I would highly discourage relying on this in any way. It's sloppy programming in general, and I would stay away from iframes altogether if possible.
Yes, you can, but it's not a straightforward solution and it has some limitations
changing
You can use Web API messages and history API together to get what you want.
Example
Jsfiddle
redirecting
You can use the example above and replace the push history with a window.location.replace
Please consider the snippet as a hint to get what you want. The example above is not well thought for security (i.e. iframe script is sending messages to the parent, irrespective of its origin).
I am using Django and the django-dynamic-formset plugin to generate a JQuery Mobile (JQM) site. I have nested forms that allow the user to click a "Add" link to another line to the form. This works great without JQM, but when JQM is used to style the form widgets the radio button labels do not trigger the correct radio button.
I have put up a static example of the behaviour, based on the generated HTML. Click the "Add" link, then try choosing a severity for the added item. The "for" attributes of the labels appear to update correctly, so I do not know what I'm doing wrong.
The django-dynamic-formset guide provides me with a way to call a JavaScript function after the user clicks the "Add" button, but I do not know if there's a JQM method I should be calling that will fix the issue. When I use JQM's enhanceWithin function it triggers a page load, which submits my form to Django, which I don't want at that point because the form won't validate yet.
Edit: I uploaded a much better example to the same URL.
After enough caffeine and peanut M&M's I have figured it out.
Reason for Failure: The django-dynamic-formset (DDF) plugin duplicates the form you give it. But the form is cloned as-is, which already includes all the JQuery Mobile (JQM) processing. This causes JQM to ignore it and makes the radio buttons misbehave.
The Solution: The DDF plugin allows you to specify what form to clone by its formTemplate parameter. JQM allows you to disable automatic mobile-enhancement of certain elements. Create an un-enhanced version of your form, and pass that to DDF as your formTemplate.
More Details:
I put this coded into my HTML head, before the reference to JQM:
<script>
$(document).bind('mobileinit',function(){
$.mobile.ignoreContentEnabled = true; // required for using the natural forms
});
</script>
And included this style to hide my "natural" form:
<style>
.natural-form { visibility: hidden; display: none; }
</style>
In the Django code I added a <div class='natural-form> and put a dummy version of my form in it (being sure to surround it another <div> with a unique ID for reference later). In my initialization of DDF I give it the unique ID as the parameter to formTemplate.
I was told on another forum I would have to hack DDF and JQM to get this to work. I am impressed at the design of both of these libraries - flexible enough that a newbie to JQuery can stick all the pieces in the right places and get something out of it.
I've been looking everywhere for code that would allow me to make the banner ads on my site show on the homepage only. Right now they show up site-wide and the advertisers are asking me to change it. I've unsuccessfully tried looking up the right code, but so far it has proven impossible. I'm only coming up for fixes for Blogger and Wordpress, and I need something for tumblr.
Any help would be much appreciated.
Thanks!
Output certain div only on homepage? — No.
Show certain div only on homepage? — Yes, with css snippet.
How to output certain div only on homepage?
Tumblr has only two main types of page:
PermalinkPage
IndexPage
IndexPage include 3 sub-types:
TagPage
DayPage
SearchPage
Tumblr has no else statement for if blocks, that's why it is impossible to output banner ads only on home page — it would be outputted on other index pages.
How to show certain div only on homepage?
You can hide #banner ads with css using this tip:
Step 1. In your Tumblr markup to your html change your body tag to this snippet:
<body class="
{block:IndexPage} index-page {/block:IndexPage}
{block:TagPage} tag-page {/block:TagPage}
{block:DayPage} day-page {/block:DayPage}
{block:SearchPage} search-page {/block:SearchPage}
">
Step 2. Then make sure you output #banner only for index pages:
{block:IndexPage} <div id="banner">...</div> {/block:IndexPage}
Step 3. After that you will have four classes for control demonstration(show/hide) of your #banner div, this css snippet must be added to Custom CSS field on customize page:
.index-page #banner {
/* not neccessable, only for tip's logic demonstration */
display: block;
}
.tag-page #banner,
.day-page #banner,
.search-page #banner {
/* hide on all index pages except home index-page */
display: none;
}
Notice: this tip only hide div, not non-output.
I posted screeenshots of Edit HTML button and Custom CSS field to show the simplicity of the second method and to cheer you up.
Could you use javascript to only should the page on the homepage?
I created a website that works quite nice but later went over to a friend's house and the website was disproportioned and almost hideous on his widescreen monitor. Without extensive rewriting of the website, is there perhaps a script that resizes my website for those on widescreen monitors, or other alternatives? Any suggestions besides "redo your website properly" welcome. Thanks!
EDIT:
Here is how my website should look like:
http://img843.imageshack.us/img843/4453/22425853.jpg
Here's how it appears on widescreen:
http://img851.imageshack.us/img851/7494/racism.jpg
It depends on how you did the layout. If you did not use absolute or fixed positiong, the simplest way could be to use a wrapper div around your content and give it a maximum width, like this
<body>
<div id="wrapper">
<!-- all the content goes here -->
</div>
</body>
and the CSS
#wrapper {
max-width: 960px;
margin: 0 auto
}
EDIT: If you do not have access to the HTML you can leave the CSS as shown and use this jQuery line (it should work but I have not tested it)
$('body').wrapInner('<div id="wrapper" />')
EDIT: I see you are not familiar with jQuery. Code that should be run only when the page is ready should be wrapped as follows:
$(function() {
$('body').wrapInner('<div id="wrapper" />');
});
Please let me know if that works for you. You can try
$('#wrapper').attr('id');
in the Firebug console to check that the wrapper div has been created.
Set a max-width in your css on the wrapper of the site.
I'm having problems with sifr showing the replaced text and the flash rendered text. All the css files are loading correctly, however I'm implementing this in sharepoint 2007 so it's possible something else is causing the problem. This is the browser output I'm getting:-
h1 class="large sIFR-replaced" style="">
object id="sIFR_replacement_0" class="sIFR-flash" height="61" width="1238" type="application/x-shockwave-flash" name="sIFR_replacement_0" data="/Style Library/sifr/cartonnage-alternate.swf" style="">
/object>
span id="sIFR_replacement_0_alternate" class="sIFR-alternate">hello hub
/h1>
(I've removed the < down the left hand side of the above code so it displays on stack overflow)
The is not hiding and for the life of me I can't see why - if it's somthing obvious I apologise!
The CSS to hide the .sIFR-alternate text doesn't seem to be applied. Inspect the page with Firebug and see if that's the case or if the CSS is conflicting with something else.