Let's say I have this wonderful html email letter. Gist.
And I would like to put it inside an HTML page made with bootstrap. Like this:
<div class='col-md-4'>
<h1>Hello</h1>
</div>
<div class='col-md-8'>
HERE
</div>
If I do it right away, my styles will break. Everything becomes a mess. If I start cutting out styles from the message, it will start losing its colors, font sizes, etc.
Basically, I would like to keep the message intact, but I need the following to be true:
Message keeps its email styles, not overriding outer document styling
Outer document keeps its bootstrap styles
Message fits perfectly into the col-md-8 div, without breaking anything
Is this even possible?
You can either use an iframe or you can use php include.
For the latter, just copy the email body content (content within the <body>....</body>) to a new file and name it say, email.php (Don't worry. There's only one line of php involved).
Then in your current webpage, add a php include line like this:
<div class='col-md-4'>
<h1>Hello</h1>
</div>
<div class='col-md-8'>
<?php include 'email.php';?>
</div>
And then, copy the css in the <style>....</style> to a new file, say `email.css' and link the current webpage (not the email.php) to that css.
N.B. Just make sure to rename your current webpage from someName.html to someName.php and also make sure that your email.php is in the same directory as the main file and you're good to go.
You mentioned that you want the styling of the main webpage and the email webpage to be independent of each other. For that, just wrap your email.php content with a div wrapper like this:
<div id="specialStyle">
<!-- your email content -->
</div>
Now for any elements whose id or class is same on both pages, say:
#commonName { /* <---- This is the main webpage --> */
font-size:14px;
}
#commonName { /* <---- This is the email webpage --> */
font-size:18px;
}
Just add #specialStyle to the email version like this:
#specialStyle #commonName {
font-size:18px;
}
Related
I have three pages on my website. index.html, services.html and company.html. What I need is when a user clicks on services link, then the page will load from the left or right side instead of the load as normal. I don't know perfectly but it may be possible with some Jquery elements like data-transition="left", data-transition="base", data-name="services". Is there any plugin to load pages from left or right. I need this, Please help me.
There is no way to "load" the page from left to right, but what you can do is:
On your services page
create a "wrapper div" around your page content, and
off-set the content inside the wrapper div to beyond the far right of the page, then
use jQuery/javascript on page load (i.e. inside the $(document).ready() function to animate the content back to normal position.
So, something like this (untested):
<body>
<div id="wrapper">
<div id="inner-wrap">
//page content goes here
//Actually, I might create an inner div here and off-set/animate that one...
</div>
</div>
</body>
CSS:
#inner-wrap{position:relative;margin-left:100vw;}
jQuery:
$(document).ready(function(
//use jQuery .animate() method to slide the marginLeft param back to 0.
){});
Note that jQuery's animate method does not use margin-left - rather, it uses marginLeft. Like that.
Example:
Animating marginLeft with jQuery
Update:
You can use the same idea that was suggested above, but you only need a single file (e.g. index.html) for the entire website, and the "pages" are all just DIVs, and you can use jQuery/javascript to "change pages".
For example:
<body>
<div id="wrapper">
<div id="page1" class="pagex">
//page ONE content goes here
</div><!-- .pagex -->
<div id="page2" class="pagex">
//page TWO content goes here
</div><!-- .pagex -->
<div id="page3" class="pagex">
//page THREE content goes here
</div><!-- .pagex -->
</div>
</body>
CSS:
#wrapper{position:relative;}
.pagex{position:absolute;top:0;left:100vw;}
Concepts you need to understand:
a) z-index -- allows you to position one div on top of another
b) position:absolute -- removes the div from the HTML flow and allows you to position it anywhere on the screen, even over-top of other divs
I need to print invoice with unknown number of items, and at the end of the invoice there is terms and conditions that is also - unknown number of lines.
So i have something similar to this:
<body>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
</div>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
</div>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
<div class="termsAndConditions"></div>
</div>
</body>
So now the page has a background image, that contains the identity of the company, and at the top there is logo. In the div of marginTop I am skipping number of lines so there is nothing to be printed their.
So in invoice content I always have it in the right place.
Now the terms and conditions comes as a variable that holds a text of html, the user will type it and i will read it and show it here.
What I want, that if the customer entered long term and conditions I want to break it into pages. But the thing is I cannot break it because i don't know where to break exactly, as it can be any thing especially if it contains html code. And I want when it got printed out the top margin should be always their.
Can anyone give me any clues?
I can only use simple JavaScript, I cannot use jQuery, and I cannot get the height of the content after page load, any JavaScript should be used while rendering. I have tried to do that but it did not work.
I am using wordpress and I have div whose classname is "page" on three different pages. Three pages slugs are 1. home 2. aboutus and 3. contactus.
I want the width of page class div on aboutus page to be different but I don't want to access the page html directly I mean supposing I only have the option of jquery to be enqueued and add some new id or class on about us page with variable width. So how can it be done.
Below is the code for three pages
on home page
<div class="page">
</div>
on about us page
<div class="page">
</div>
on contactus page
<div class="page">
</div>
CSS
div.page {width:1000px; height:auto;}
I don't want to manually change the html but want to use jquery to append some new class and define different width for about us page.
add to your body tag this php code to append class:
https://codex.wordpress.org/Function_Reference/body_class
(or check if it is not already added).then your about us page will have code like that:
<body class="about-us page-12...">
<div class="page">
then you will be able to write special css for this case:
.about-us div.page {width:500px; height:auto;}
I have some text in a website that I want to change using javascript because I can't change it any other way.
In short, the site is laid out like such:
...some other divs before here, body, head, etc...
<div id="header" class="container-fluid clearfix">
<div class = "hero-unit">
<h1 class="title">Support Center</h1>
...some other divs for other parts of the page...
</div>
</div>
...more divs, footer, etc...
I don't need the text to change on click or anything like that I just want it to be set on load to something different than Support Center but I'm not sure if I'm placing the script in the correct place or if the syntax is wrong?
I've tried placing it before and after and it doesn't seem to work. Here is the code:
<script type="text/javascript">
var targetDiv = document.getElementByID("header").getElementsByClassName("hero-unit")[0].getElementsByClassName("title")[0];
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
</script>
Thank you.
Looking at the actual source of your page, your page does not contain a h1 element with a class of title.
Your actual source code
<div id="header" class="container-fluid clearfix">
<div class="hero-unit"></div>
<div class="container-fluid clearfix">
<div class="row-fluid">
<div class="leftcolumn"></div>
<div class="rightcolumn"></div>
</div>
</div>
</div>
This means it does not exist till some point after your page loads. You need to put your code after the code that generates the h1 title element
In jQuery (if you can use it), you'd use something like
$("#title").text("Something else");
it looks like you are not getting the specific class to change the html
try with querySelector like i have done
JS Fiddle
var targetDiv = document.querySelector('#header > .hero-unit > h1.title')
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
I'm using simplecart.js which generates data for me to add to a cart, and then passes it to PayPal for me.
I have successfully added the 'add to basket' and 'checkout' features but am finding styling the JS-generated code impossible as no styles applied to it will work.
This is the code site has given to me, which generates a number of items such as name, quantity etc from stored data. It outputs all information correctly but any styles applied to the class names do nothing.
This is the code that generates the data:
<div class="simpleCart_items"></div>
This is the result from the web browser:
<div class="simpleCart_items"><div>
<div class="headerRow">
<div class="item-name">Name</div>
<div class="item-price">Price</div>
<div class="item-quantity">Qty</div>
<div class="item-remove"></div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-3">
<div class="item-name">The Jenny Snood £11</div>
<div class="item-price">£11.00</div>
<div class="item-quantity">1</div>
<div class="item-remove">
Remove
</div>
</div>
</div>
</div>
The browser is receiving all the data correctly, but applying any styles to the class names does nothing. For example, I have:
.headerRow{
background-colour:#0F0;
}
The result should be that the background of headerRow be lime, but nothing happens. It is not calling the style correctly.
I have tried everything but none of the classes will fetch the styles applied to them.
Here is a screenshot of how it looks, obviously not very nice unstyled, but I can't apply any styles at all to it.
Here is a link to the live site
A further examples:
I've added the code given which generates the totals:
<div class="simpleCart_total"></div>
I have tried giving it it's own new class and also styling the original, with !important - none of this works.
<div class="totals simpleCart_total"></div>
.simpleCart_total{
background-color:#0F0 !important;
}
.totals{
background-color:#0F0 !important;
}
None of the above seems to have any impact whatsoever.
There is some other css or inline javascript affecting the custom style your are attempting to use.
To mitigate this issue do one of the following:
Add !important after each css statement like so:
.headerRow{background-color:#0F0 !important;}
Reorder the css files so your custom css file is at the bottom
The problem here is that the styles are being applied dynamically by the js after your CSS (ie during the initialization of the plugin). You're only hope is to style it after this initialization with your own js, I think.
You can check this in Firebug... If you look at the elements there, you should see a bunch of inline styles being applied to them. These will trump your CSS in the header (and even the inline CSS you provide beforehand).
Edit: I saw some junky characters just before the directives in question (as well as those pointed out in another answer). I would try removing all the white space after the preceding directive and before the broken ones. It does not appear that the js is dynamically changing anything.