I'm using jQuery load function to replace iframe basically, since it loads only the section better.
It's working fine but the image is having problem since the directory of the image is placed inside about.php page, and i'm trying reaching it from folder/editor.php.
About.php directory - images/img.jpg
Editor.php directory - ../images/img.jpg
Editor.php - Notice I have tried to use different directory on this page.
<style>
.content-page .hero {
height: 250px;
background-image: url("../images/header-background.jpg");/*url("/images/headers/header-background.jpg");*/
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
flex-direction: column;
}
</style>
<div id="iframe"></div>
<script>
$('#iframe').load('../about.php #content');
</script>
About.php
<div id="content">
<style>
.content-page .hero {
height: 250px;
background-image: url("images/header-background.jpg");/*url("/images/headers/header-background.jpg");*/
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
flex-direction: column;
}
</style>
<!-- Content goes here -->
</div>
How can I change css image source attribute after load function goes into action?
You actually did two questions: how to change the style, and how to do it after $.load executed. About the first one, there are several ways. About the second, you could use the callback argument, the third $.load argument.
From the code you posted it seems you actually don't want to change the background image, it seems you want to keep the same, simply you have some problems due to the directories.
The cleanest solution would be to write a .css file and include it in both the pages rather than to spread <style> elements in your pages with identical content.
Another solution could be to use absolute paths rather than relative paths: /images/header-background.jpg (if your image directory is in the root of your web server) rather than images/header-background.jpg or ../images/header-background.jpg.
If you strictly need to keep this architecture changing your About.php as follows could be another possible solution.
<style>
.content-page .hero {
height: 250px;
background-image: url("images/header-background.jpg");/*url("/images/headers/header-background.jpg");*/
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
flex-direction: column;
}
</style>
<div id="content">
<!-- Content goes here -->
</div>
Related
I have a site that I used chrome developer tools to get working. However, when checking the site in Firefox, the background image is only viewable in a small strip in the middle of the page.
the code for my background image is the following:
body {
background-image: url(../assets/headerbackground.jpg);
min-height: 0px;
-webkit-background-size: 100vmax;
-moz-background-size: 100vmax;
-o-background-size: 100vmax;
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/headerbackground.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/headerbackground.jpg', sizingMethod='scale');
}
Any help would be appreciated. Not sure how to troubleshoot this.
UPDATE:
Found the solution to my problem: My <body> had elements that were making it sandwich between the header and footer. Removing those elements from <body> did the trick.
You should be able to shave off the vendor prefixes, contain and cover have been well adopted for some time now.
https://caniuse.com/?search=background-size
body {
background-image: url('../assets/headerbackground.jpg');
background-attachment: fixed;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
In addition to this, as a rule of thumb, I would remove the styling from the body tag and wrap the content of your site in something like <div id="app"> ... </div>. The <html> and <body> tags are rendered differently in each browser more than likely this is what is causing your site to display differently in separate browsers.
RMZ
I'm busy building a website and have a banner in it. The banner consists out of a static background image with static text overlay.
Now I want to keep the banner with the text overlay, but replace the static background image with a simple slideshow. The images should be replaced every 3 seconds. It should be a continuous loop, triggered on page load event. This function should utilize jQuery.
This is the html code for the banner as it is at the moment:
<!--BANNER HTML-->
<div class="banner">
<div class="banner-text">
<h1>LONG LAYOVER?</h1>
<h1>Is Amsterdam Schiphol your transfer hub?</h1>
<h4>Make the most of your layover by doing some sightseeing!<br>Tailored according to the length of your layover</h4>
</div>
</div>
This is the CSS:
.banner h1, .banner h1, .banner h4 {
margin: 0;
text-shadow: 2px 2px 6px #000;
text-align: center;
}
.banner {
color: white;
background: url(images/bannerimage.png) top left/cover no-repeat;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
Does anybody have a smart solution to my problem?
The simpliest answer comes to my mind is defining functions and call them in timeout functions as shown in the DEMO here
You can also use togglaClass instead of .css() function. I would prefer toggleClass but just did this was is quicker for me.
So I have two elements, in my case an image and a button. I have the image at the top of the page and the button at the bottom. I want to have a div (or some other element) to display text, but I need it centered between the two elements.
<div style="text-align: center;">
<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
<div style="text-align: center; border: 3px solid blue;">Help</div>
<button style="position: absolute; bottom: 5px;">Hi</button></div>
JSFIDDLE
I'm using HTML and Javascript.
Look into flexbox for modern layouts:
a guide to flexbox
You could use flexbox, as suggested in other answers. This can be hard to wrangle sometimes though, at your first go at it. Though it's highly recommended to add flexbox to your tool belt.
To fix this perhaps more simply:
1.) You could set the height of the parent div (to whatever you want) and then set the margin-top on the element that you want to make centered. You can tweak it until it sits right.
OR...
2.) Alternatively: You could also set the position:relative; and the top: 100px (or whatever sets it into the middle. Setting the position rule will allow you to set top, or left, right or bottom. Without setting the position rule, you can't use those rules.
Create a <div></div> to hold your text whatever you want to put in it and then manipulate that with CSS.
Flexbox provides the best and the short solution from the traditional solutions.
You can find the working fiddle here https://jsfiddle.net/rr0e4qh7/14/
Your Html
<div class="container">
<div class="image">
<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
</div>
<div class="text">
Help
</div>
<div class="btn">
<button>
My Button
</button>
</div>
</div>
Here is CSS part
.container{
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
}
.text{
display: flex;
height: 100%;
align-items: center;
justify-content: center
}
I'm having a lot of trouble figuring out how to get one of my views in Angular to display with a specific background. I'm finding that, with the code below, the entire view that I'm trying to style disappears.
All relevant code is below:
HTML (index.html):
<div class="col-md-8 col-md-offset-2">
<div ng-view></div>
</div>
Angular view:
<div class="main-body">
<div ng-switch="xxCtrl.xxx">
</div>
</div>
CSS:
body {
margin-top: 50px;
background: url('../img/main-bg.jpeg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
text-align: center;
font-size: 16px;
height:100%;
width: 100%;
margin: 0;
padding: 0;
}
.main-body {
background-color: rgba(16, 16, 16, 0.6);
height: 100%;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow: scroll; overflow-x:hidden;
z-index: -1000000;
}
I have tried moving the main-body class into the ng-switch, in the ng-switch itself, etc. I even tried setting in-line CSS using ng-style, but I couldn't get the height set to 100%, regardless of how I formatted it. The only time I've been able to get the background to display as I wished was when I set the wrapper div outside of ng-view in index.html to main-body. However, I really don't want the background I'm creating to display across all views - just the one.
I have a feeling this is likely a CSS-related issue, not an Angular one. If anyone can point me in the right direction here, it would be greatly appreciated! Thank you!
Was able to solve this problem by changing the height to 100vh instead of 100%.
I am trying to use jScrollPane to scroll through my gallery that is inside of an iframe. I am using the jQuery code for iframe scrolling from the official example.
Using this code doesn't work for my images (it just hides the original browser scrollbars, doesn't throw any errors and refuses to scroll), but it works perfectly if I replace my images with multiple paragraphs so they overflow (just like in the example).
EDIT: I forgot to mention that images scroll perfectly using the default browser scrollbar.
EDIT #2: Made a JSFiddle.
Here's how my gallery is structured:
...
</head>
<body>
<div id="content"> // Used the same way as in the example, works with text
<div class="gallery">
<div class='picture'>
<img class='pin' src='something'/>
<div class='wrapper'>
<img class='thumbnail' src='something'/>
<img class='border' src='something' />
</div>
</div>
<div class='picture'>
...
</div>
</div>
</div>
...
And here's the CSS for gallery and pictures:
.gallery {
position: relative;
width: 98%;
}
.picture {
float: left;
position: relative;
display: list-item;
list-style-type: none;
width: 11%;
}
.picture .pin {
position: absolute;
left: 48%;
width: 13%;
}
.picture .thumbnail {
position: absolute;
width: 89%;
margin-top: 19%;
}
.picture .border {
position: absolute;
width: 100%;
}
I ignored margins and some other irrelevant stuff, but you get the idea.
The jQuery code is exactly the same as presented in the example.
I think the problem is that images are loaded after scrollbar is initialized, and scrollbar does not detect container size changes by default. If you read documentation carefully, you can see next:
Demo showing how autoReinitialise can also be used so that content
with images in it displays correctly in jScrollPane
So, try autoReinitialise option. If it won't help - update your question with example of your iframe on jsFiddle.net
Solved it!
Apparently, the script didn't like the absolute position of my .picture .pin. Changing it to relative and restyling a bit solved my issue.
Updated JSFiddle