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;}
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'm using jQuery to include a header to my main index page (as well as other pages). I want to highlight different items of the nav bar (which is in the header.html) using CSS depending on which page the user is currently on. Say if the user is on the Home page, then CSS will add a class to the Home item of the nav bar found in header.html. The problem I'm having is that the class doesn't get added, presumably because I'm trying to add a class to an element that is in another (jQuery loaded) file
index.html looks like this:
<html>
<head>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
</head>
<body>
<div id="header"></div>
<script>
$('.homeNav > a').addClass("navSelected");
</script>
</body>
</html>
The above is the main page of the site, where I'm using jQuery to load header.html into the div in the body. Then in my body script tag I add the class navSelected to the header element
header.html looks like this:
<header>
<h1>title</h1>
</header>
<nav>
<span class="homeNav">Home</span>
<span class="contactNav">Contact</span>
</nav>
So when the user hits this page, I want to add the navSelected class to the span with class homeNav in header.html, but the class does not get added and I'm not sure what the fix is.
If I use jQuery to add the class from within header.html then the class gets added fine, but that defeats the purpose of only highlighting the nav item relevant to the page the user is currently on
jQuery's load() is just a shortcut for $.ajax, and it's asynchronous.
You have to wait for the content to load, before you can manipulate it, and you'd do that by using the callback
$(function(){
$("#header").load("header.html", function() {
$('.homeNav > a').addClass("navSelected");
});
});
Your $('.homeNav > a') probably fail to find the DOM elements because this line is executed before the content is loaded (created). So use the callback of load like #KartikeyaSharma suggested.
There is a little change that the AJAX callback doesn't work because the creation of DOM elements takes time, so it is safer to call this function at the end of header.html:
onNavReady = function (){$('.homeNav > a').addClass("navSelected");}
Inside your header.html call this function at the end
...
<span class="contactNav">Contact</span>
<script>onNavReady()></script>
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;
}
I am creating content dynamically inside a Main div , the content is stored in another div with classes... but the content is not visible since the page and all the java scripts are already loaded ... I think I need to refresh the main div with all the classes in order for the content to be visible.....If one can please help me with the code would be great......
Sample code:
<div id="grid">
--- Dynamically generated
<div class="Test" >
</div>
</div>
I have a site that is divided into 2 columns (each at 50% width):
HTML:
<nav></nav>
<div class="left-column"></div>
<div class="right-column"></div>
<footer></footer>
I have a secondary page with html:
<nav></nav>
<div class="left-column"></div>
<div class="right-column level-two"></div>
<footer></footer>
Using .load() I want to have the right-column on the secondary page load on top of the right-column of the first page (with the intention of adding a close box afterwards).
The html would look like this:
<nav></nav>
<div class="left-column"></div>
<div class="right-column level-two"></div> //THE RIGHT COLUMN FROM LEVEL 2 INSERTED HERE
<div class="right-column"></div>
<footer></footer>
The problem is I can't figure out a way to do this: .append() still adds it into the div it's attached to and .before() doesn't work to add jquery(?) just content?
I want the two right-columns to exist because if I close out right-column level-two I still want the original right-column underneath.
Use CSS selector to search for the class left-column and it's neighbor class right-column
Insert the data from holder in between the two classes
$(document).ready( function () {
$.get('second-page-url.html',function (data) {
$(data).find('.right-column.level-two').insertBefore($('.left-column + .right-column'));
});
$.get('<secondary_page_url>',function (data) {
$(data).find('.right-column.level-two').insertBefore($('.right-column'));
})