I am trying to set different background images for each page in jquery mobile.
<div data-role="page" id="pageone">...
</div>
<div data-role="page" id="pagetwo">...
</div>
As you can see, each page has a different id, so my thought was that i can assign background image for that id (and another image for another id)
#pageone {background: transparent url(URL) repeat center center !important;}
#pagetwo {background: transparent url(URL) repeat center center !important;}
The image is a pattern (really small 7x10 px). But i couldn't do it. For some reason it appears when you load the page (outside the page div) but then it disappears.
Did anyone encounter the same problem and knows what can i do about it?
Ty in advance :)
Ended up using theme roller and importing my theme there.
Then duplicated it into swatch b c and d.
In my CSS file i changed the color to background image (for each swatch there was a different image)
In my html i put:
<div data-role="page" id="pageone" class="ui-page-theme-a">...
</div>
<div data-role="page" id="pageone" class="ui-page-theme-b">...
</div>
and that for each page i have that have their own background image.
Related
I have used float and made 3 divs floated, left, right and center. Left one and right one have images, Where as center one has text in it. But, when the center div's text is overflowed, it's text is displayed below. For example, I have programmed my html file based on my laptop browser. I have used padding so that the text will be fit exactly in between those 2 images. But when I have opened the same html file in my mobile, which has less pixels, the text has been displayed in 2 lines.
Now, my problem is that, I want to make the text fixed in between those 2 images no matter in which device or browser the file is opened. How can I do that?
Here is my code:
<header>
<div style="float:left;padding-left:24%">
<img src="avr_logo.jpg" style="display: inline" width="100" height="18%" alt="Browser not Supported">
</div>
<div style="float:right;padding-right:20%"><img src="hk.jpg" width="100" height="17%"></div>
<div style="float:center;padding-top:1%">
<h1>Welcome to AHK Organization</h1>
</div>
</header>
I do not have any fixed tags as of in:
How can I make an element on a webpage fixed BUT relative to another element?
The solution over there says to fix the center and make left and right tags relative to the center tag. I don't want to fix any tag.
try this fiddle use display:inline-block rather than float
<header>
<div style="display:inline-block;width:25%;">
<img src="avr_logo.jpg" style="display: inline" width="100%" alt="Browser not Supported">
</div>
<div style="display:inline-block;width:44%;">
<h1>Welcome to AHK Organization</h1>
</div>
<div style="display:inline-block;width:25%;"><img src="hk.jpg" width="100%" alt="Browser not Supported"></div>
</header>
So basically I am using a jquery plug-in called blueprint split layout. The code for it can be found at: http://tympanus.net/Blueprints/SplitLayout/index.html. I modified the code to fit with my website theme and it worked perfectly, that is until I put it inside a section container with a class of content. Whenever it goes into this container, it ceases to function. However, if I keep this out of the div container, it functions beautifully, but screws the rest of the site layout up. I have searched for days for a solution, and I have tweaked and rebuilt my code to no end with no success. Can anyone please tell me what is going wrong? On another note, I did notice that some of my links are not working either when in this container. I've tried tweaking it to a div container, a section container, and article container, nothing works.
Here is a link to my html: http://codepen.io/luvmeeluvmenot/pen/avzxqZ.html
The code in question is:
<div class="splitcontainer">
<div id="splitlayout" class="splitlayout">
<div class="intro" >
<div class="side side-left">
<div class="intro-content">
<div class="profile_containerL">
<div class="profile"><img src="imgs/profile1.jpg" alt="profile1">
</div>
<div class="h1s"><span>Andrew Mac Gregor </span>Web Designer
</div>
</div>
</div>
</div>
<div class="side side-right">
<div class="intro-content">
<div class="profile_container">
<div class="profile"><img src="imgs/profile2.jpg" alt="profile2"></div>
<div class="h1s"><span>Brittney Mac Gregor </span>Web Developer</div>
</div>
</div>
</div>
<Article>
<div class="page page-right">
<div class="page-inner">
<div class="back_R">
<a href="javascript:history.go(0)">
<img src="imgs/whiteX.png" alt="BACK" />
</a>
</div>
<div class="section">
<div class="h2s">Web Development</div>
<p>...</p>
</div>
</div><!-- /page-inner -->
</div><!-- /page-right -->
<div class="page page-left">
<div class="page-inner">
<div class="back_L">
<a href="javascript:history.go(0)">
<img src="imgs/whiteX.png" alt="BACK" />
</a>
</div>
<div class="section">
<div class="h2s">Web Design</div>
<p>...</p>
</div>
</div><!-- /page-inner -->
</div><!-- /page-left -->
</div><!-- /intro -->
</div><!-- /container2 -->
</div><!-- /splitcontainer -->
Here is one to my css: http://codepen.io/luvmeeluvmenot/pen/avzxqZ.css
The css code in question is:
.side-left,.side-right{color:#fff;background-image:url(../imgs/ABbg.png)}.page,.side{-webkit-backface-visibility:hidden}.splitcontainer{position:inherit;height:600px;margin-left:auto;margin-right:auto;overflow-x:hidden;z-index:2000}.side{position:absolute;top:0;z-index:100;width:50%;height:600px;text-align:center;background-color:#000}.close-left .side-left,.close-right .side-right,.open-left .side-left{z-index:200}.open-left .side,.open-right .side{cursor:default}.side-left{left:0}.side-right{right:0}.intro-content{position:absolute;top:50%;left:50%;padding:0 1em;width:50%;cursor:pointer;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%)}.profile{margin:0 auto;width:140px;height:140px;border-radius:50%}.profile img{max-width:100%;border-radius:50%}.intro-content .h1s>span{display:block;white-space:nowrap}.intro-content .h1s>span:first-child{font-weight:300;font-size:2em}.intro-content .h1s>span:nth-child(2){position:absolute;margin-top:.5em;padding:.8em;text-transform:uppercase;letter-spacing:1px;font-size:.8em}.intro-content .h1s>span:nth-child(2):before{position:absolute;top:0;left:25%;width:50%;height:2px;background:#000;content:''}.profile_container,.profile_containerL{padding-top:20px;background-color:rgba(0,0,0,.8);border-radius:20px}.profile_container{box-shadow:2px 3px 5px -1px rgba(255,255,255,.8)}.profile_containerL{box-shadow:-2px 3px 5px -1px rgba(255,255,255,.8)}.side-right .intro-content h1>span:nth-child(2):before{background:#000}.back_L{float:left}.back_R{float:right}.back_L img{float:left;width:50px;height:50px}.back_R img{float:right;width:50px;height:50px}.back_L img:hover,.back_R img:hover{opacity:.4}.mobile-layout .back{position:absolute}.back-left{left:12.5%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.back-right{right:12.5%;-webkit-transform:translateX(50%);transform:translateX(50%);color:#fff}.open-left .back-right,.open-right .back-left{visibility:visible;opacity:1;-webkit-transition-delay:.3s;transition-delay:.3s;pointer-events:auto}.back:hover{color:#ddd}.page-left,.page-right{background:#000;color:#fff}.page{position:absolute;top:0;overflow:auto;min-height:100%;width:75%;height:600px;font-size:1.4em}.page-right{left:25%;outline:#000 solid 5px;-webkit-transform:translateX(100%);transform:translateX(100%)}.splitlayout.open-right{background:#000}.page-left{left:0;outline:#fff solid 5px;text-align:right;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.splitlayout.open-left{background:#fff}.page-inner{padding:2em}.page-inner .section{padding-bottom:1em}.page-inner .h2s{margin:0 0 1em;font-weight:300;font-size:2em;font-family:audiowide}.page-inner p{font-weight:200;font-size:.8em}.page,.side{-webkit-transition:-webkit-transform .6s;transition:transform .6s}.overlay{-webkit-transition:opacity .6s,visibility .1s .6s;transition:opacity .6s,visibility .1s .6s}.intro-content{-webkit-transition:-webkit-transform .6s,top .6s;transition:transform .6s,top .6s}.intro-content h1,.reset-layout .page,.splitlayout.close-left .page-right,.splitlayout.close-right .page-left,.splitlayout.open-left .page-right,.splitlayout.open-right .page-left{position:absolute;overflow:hidden;height:600px}.splitlayout.open-left .page-left,.splitlayout.open-right .page-right{position:absolute;overflow:auto;height:600px}.open-left .side-right .overlay,.open-right .side-left .overlay{visibility:visible;opacity:1;-webkit-transition:opacity .6s;transition:opacity .6s}.open-right .side-left{-webkit-transform:translateX(-60%);transform:translateX(-60%)}.open-right .side-right{z-index:200;-webkit-transform:translateX(-150%);transform:translateX(-150%)}.open-right .side-right .intro-content{-webkit-transform:translateY(-50%) translateX(0) scale(.6);transform:translateY(-50%) translateX(0) scale(.6)}.open-right .page-right{-webkit-transform:translateX(0);transform:translateX(0)}.open-left .side-right{-webkit-transform:translateX(60%);transform:translateX(60%)}.open-left .side-left{-webkit-transform:translateX(150%);transform:translateX(150%)}.open-left .side-left .intro-content{-webkit-transform:translateY(-50%) translateX(-100%) scale(.6);transform:translateY(-50%) translateX(-100%) scale(.6)}.open-left .codropsheader{opacity:0;visibility:hidden;-webkit-transition:opacity .3s,visibility .1s .3s;transition:opacity .3s,visibility .1s .3s}.open-left .page-left{-webkit-transform:translateX(0);transform:translateX(0)}
The javascript being used for this site can be obtained from blueprint site listed above The two names of the javascript files are cbpSplitLayout.js and Classie.js, as well as the included modernizer.js file from the site.
Can anyone please help me figure out why javascript would stop once the plug-ins html is placed in the main wrapper section? Thanks in advance.
Well it's been a few days and I want to I guess provide my own answer to my question. I don't have the "exact" answer, however, this is what I have found to fix the issue. The original issue was that every time I placed my jquery coded html inside the main wrapper div, the jquery functions would not work at all. Basically I'm building a parallax one page site that has multiple slides. The second slide from the header has the jquery plug in that is suppose to have two profile pics on it. One side for the developer and one for the designer. When either profile is clicked, depending on which one, the plugin is suppose to make the page slide open either left or right. Upon clicking the "x" I put inside the inner page, the page refreshes and shuts the sliding profile.
I noticed that when this was placed inside the main wrapper div that the rest of my content was in, it ceased to function. I still cannot explain why that is. However, if I placed it on the outside of the wrapper, it would automatically become fixed at the top, blocking my fixed header. That I cannot explain either. I tried creating two different wrappers, one for the first slide, leaving the jquery code out of that wrapper, then another wrapper to place the remaining content in, but still the jquery code would just become fixed to the top of the screen and block the header. It would work, mind you, but completely wrong positioning. So... my solution, although perhaps not the right one to the issue, was to re-create all the html code. This time, I added each slide 1 at a time and messed about with the positioning finally getting the whole page to function correctly when in a relative position, aside from my header and footer being fixed. Now the plug-in works beautifully and the page is taking shape into what I wanted it to be. So... my conclusion, although I can't explain the details, is that when using a jquery plugin, the positioning of that part of html code that responds to the js, relies on positioning. Apparently the only positioning that would work in my case was relative. Another guess as to why this could be was because the plug-in was designed to be a one full page plug-in and I tweaked the html to get it to fit in a 1903px width by 600px height container. Hopefully this will help someone out there struggling with the same issue.
Im trying to put a background-image url of an lower div and add them to an higher div. The problem is, there are many lower divs with background-images and all of them has the same classname. Overall Im trying to build a parallax theme with drupal 7. The vision is to stream all of my news, put the background-image on 100vh, put the content in the middle in a white box and let them parallax scroll. I am working with views. I have one view which displays all news with fields: Title, Image, Body. The image-field is an background-image field, so the div where its normal displayed got the original-image url as background-image-url.
I just can't put the url of .bg-holder into .section.jumbotron. Or is there any other solution?
<div class="section jumbotron">
<div class="views-field views-field-title">
<h1 class="field-content">HEADLINE</h1>
</div>
<div class="views-field views-field-field-image">
<div class="field-content">
<div class="bg-holder" style="background-image: url(http://localhost/drupal/sites/default/files/styles/large/public/field/image/wallhaven-157066.jpg?itok=2BHBQSVa); background-attachment: scroll; background-size: 1903px;"></div>
</div>
</div>
<div class="views-field views-field-body">
<p class="field-content">LOREM</p>
</div>
</div>
Jfiddle of my Body:
http://jsfiddle.net/anLL1uop/2/
I'm not sure I 100% understand your question, but to change the background of 'jumborton', to that of a specific bg-holder, I would give each one a unique ID, so they can all have the same style (since they are the same class), but the ID lets you tell jQuery which background image you want. I would also set the background-image for each one in the css file, as opposed to doing
<div style="background-image: url(...);"
Here is a jsfiddle that shows you what I mean. It has the jQuery needed to change the background of the jumbotron to that of the clicked div, using its id.
https://jsfiddle.net/mahmudzero/anLL1uop/23/
I have content in a div that I am trying to scale according to a user's preferences. I am using Louis Remi's transform.js to do this.
However, when I do, it either:
Pushes the content way above top of the div (cutting off content on scale in)
Pushes the content way too far down the container (leaving a lot of white space on scale out)
I've tried to call this snippet on DOM ready
$("#zoomMe").css({ 'transform' : 'scale(.50)', 'top' : '-2280px' });
but this only works at specific heights. I was wondering if there was anyway that I can push content to the top of the div even if my container changes heights.
Here is a jsfiddle example. Right now it is at a .50 scale which shows content being in the middle of the screen leaving a lot of space on top of and bottom of div.
Here is a detailed picture of what I am trying to achieve.
HTML
<div id="reportContainer">
<div id="zoomMe">
<div id="content1" class="fillerBox"> </div>
<div id="content2" class="fillerBox"> </div>
<div id="content3" class="fillerBox"> </div>
<div id="content4" class="fillerBox"> </div>
<div id="content5" class="fillerBox"> </div>
</div>
</div>
CSS
#reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;}
.fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; }
JS
$(document).ready(function() {
$("#reportContainer").height($(window).height()-50);
$("#zoomMe").css('transform', 'scale(.50)' );
});
I believe what you are looking for is transform-origin
http://css-tricks.com/almanac/properties/t/transform-origin/
This will enable you to set the point on your element that will stay put as transforms occur. By setting the transform-origin to the top center: you can scale the element and keep its position relative to the top in the same place.
This worked for me! I don't know much about this transform.js plugin, but the property you want to look at is "transform-origin". Your issue is that it's scaling #zoomMe from the center, making your post-transform content 25% offset from the top and bottom.
CSS
#zoomMe {
transform-origin:center top;
-webkit-transform-origin:center top;
}
I have a page that features a main image. The main image will change its height and width depending on the photo. I also have an AddThis sharing widget next to the image. I have the spacing correct for one size image. How do I set the AddThis div to fluidly maintain its current spacing depending on the image size?
Here is a link so you can see an example of what I am speaking about. The black box (outlined in white) on the page represents an image that will change. The AddThis div currently adjust for the height but not the width. Here is the CSS for the AddThis div:
style="left: -110px; top:-220px;" /* How it is currently positioned and I like the current spacing. It must maintain this spacing */
.addthis_floating_style{
background: none repeat scroll 0 0 #000000 !important;
position: relative !important;
}
How do I change this so AddThis correctly adjust its spacing to the image height and width?
Another way I thought of doing this is using jQuery to read the image height and width then set the left and top elements of the AddThis div based on image size. This would need to be calculated dynamically.
I will use whatever method works the best. Please provide an example as javascript is not my strong suit.
UPDATE: I read another question and read an answer provided and I am wondering if it will solve my issue but does not seem to be working correctly. Here is the code have tried (Note: What I am currently using is above, the below code is what I have tried):
JS
var $j = jQuery.noConflict();
$j("#add-this-vertical").position({
my: "right top",
at: "right bottom",
of: $j("#image-container"),
collision: "fit"
})
HTML
<div id="image-container">
<div class="img-center"><img src="/test.jpg" alt="test" />
</div>
<div id="add-this-vertical">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/
300/addthis_widget.js">
</script>
<!-- AddThis Button END -->
</div>
</div>
You could add some JavaScript to the image tag like this:
<img onload="onMyImageLoad(this)" />
and then elsewhere in your document place:
<script>
function onMyImageLoad( img )
{
var height = img.height
// now do something with this height value like change a
// div's height or margin-top
}
</script>
Here is how I have done this but my image is no longer centered on the page. Working on that one...
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;">
<img src="/Images/test.jpg" alt="test" />
</div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/
addthis_widget.js"></script>
</div>
</div>