I loaded some HTML from another page via $.ajax:
<script type="text/javascript">
$(function() {
$.ajax({
url: '/getInfo',
context: $('#contentBox'),
success: function(data) {
$(this).html(data);
}
});
});
</script>
<style type="text/css">
#makeMeRed {color: red !important;}
</style>
<div id="contentBox"></div>
The code loads this HTML into the div with ID contentBox:
<p id="makeMeRed">I'm supposed to be red.</p>
However, the paragraph is not red. How can I give elements loaded via Ajax CSS properties?
To be specific, jQuery Mobile CSS is not rendering in the HTML I pulled from Ajax:
http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css
Your markup is was invalid
<style="text/css">
should be
<style type="text/css">
Otherwise CSS rules should be applied fine to HTML loaded via AJAX.
Update - Tips for debugging unmatched CSS:
Use the element inspector to find which rules are beign matched.
Check the markup is what you expected after you pulled it by AJAX.
Ensure there are no inline styling or other <style> tags in the new markup that could conflict.
Related
Can I put a <style> tag inside a template for an Aurelia view? I'm having a specific issue where if I have a <style> tag in the template, my aurelia-dialog is not aligned correctly (it's floated to the top of the screen instead of centered in the middle). As soon as I remove the <style> tag, everything is correctly placed. What is the proper way to write .css classes for a view / template?
Example: For my dialog component (similar to a bootstrap modal), I have a dialog.html and a dialog.js
Inside dialog.html, the code looks something like this:
<template>
<style media="screen">
.selectedBorder {
border: 1px solid black;
}
</style>
<ai-dialog>
<ai-dialog-header>
Header
</ai-dialog-header>
<ai-dialog-body>
Sample body information
</ai-dialog-body>
<ai-dialog-footer>
Footer info
</ai-dialog-footer>
</ai-dialog>
</template>
Edit: I figured it out. You can have <style> tags inside templates. My problem was that i had one template (main screen area) calling another template (popup dialog). I just had to move the <style> from the dialog.html into the main view's html and everything worked correctly.
This might not be the popular consensus, but what I have been doing it making all of my customer elements containerless, eliminating the markup bloat and then namespacing the template content with an id attribute. For Example:
someView.html:
<body>
<avatar-pic containerless></avatar-pic>
</body>
avatar-pic.html
<template>
<section class="avatar-pic">
....
</section>
</template>
avatar-pic.css
.avatar-pic {
...styles here
}
I am trying to set the left and top css properties for a span element. This works fine in HTML4 page but has issues on HTML5 page. The code has been posted on jsfiddle https://jsfiddle.net/arunn/pxxgtnqf/ which shows the behaviour in HTML5 page. I am posting the code here for HTML4 behaviour.
<!DOCTYPE>
<html>
<body>
<span id='hello' style='position:absolute;top:100px;'>hello</span>
</body>
<script type="text/javascript">
document.getElementById("hello").style.left = 100;
document.getElementById("hello").style.top = 100;
</script>
</html>
Make your left and top values a string including a measurment type like "px".
document.getElementById("hello").style.left="100px";
document.getElementById("hello").style.top="100px";
Your fiddle updated
I am including styles in normal way like this:
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
this styles has a lot of styles which destroy my main view, it applies to body element, is it possible to applay the style only to one particular div?
Put that <div> into a separate page and include bootstrap CSS only in that page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
</head>
<body>
<div>This is your DIV</div>
</body>
</html>
Your main page won't be touched by that and you'll be able to display that div inside your main page simply using an iframe, change (for example) this:
<div>This is your DIV</div>
To this:
<iframe src="url of the other page"></iframe>
Of course you may need to change little bit the logic of your page to accommodate this (primary I guess because of server side C# code, for client side JavaScript code it should be easier because the come from the same domain).
Yes, you can do that by ID:
<div id="myDiv"></div>
and then the CSS would be:
#myDiv { ... }
and that will apply that style to anything named myDiv. You could also use classes:
<div class="someClass"></div>
and then the CSS would be:
.someClass { ... }
and that will apply that style to anything with that class attached.
Based on what you're describing, surrounding the generality of the CSS that's breaking the already defined CSS, you're going to want to get rid of those general element styles and use ID's because it sounds like you're trying to merge some CSS.
You try to remove all styles of body with javascript code, and after that, after you add a name/id to the body style in your correct css, set this as class attribute of your body. (js code too after the document is completely loaded)
Another (stupid) solution depends on what do you have in the css file. Do you can edit the /css/boostrap.css, simply replace all body word with ".body1" (fe => make a class from it)?
I have a CSS class where I added a background image like this:
.my-class{
background-image: url(images/my-bg.png);
}
this applies fine and works properly in browsers, but when I see it in the iPad, the background image is not visible.
What could be the reason?
Without further information (i.e. how you're applying this class, and to which element), I can't help further. I can tell you however, that this snippet works just fine on desktop, iPhone and iPad:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.my-class{background-image: url(images/my-bg.png);}
</style>
</head>
<body class="my-class">
<p>Some content</p>
</body>
</html>
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I had this issue and finally after hours of apple bashing and toiling I made a div tag with an ID around my entire site. The iPad loves it :)
Problem solved.
CSS
<style type="text/css">
#bodybackground {
background:#999 url('http://mywebsite.com/images/background.jpg')
}
</style>
HTML
<div id="bodybackground">
entire site here
</div>
Add this meta tag to your page
<meta name = "viewport" content = "width = device-width, height = device-height"/>
I found that I was having the same problem, (ie: no background image shown on iPad specifically), the problem was the use of quotes, or lack thereof, when apostrophes were needed...
Problem (no apostrophes)
.my-class{background-image: url(images/my-bg.png);}
Fix (apostrophes added)
.my-class{background-image: url('images/my-bg.png');}
If you're saving the .png from photoshop, make sure you save it via 'save for web and devices' and select PNG24.
I have a vertical left menu in my asp.net page.
using jquery .load,i try to load other aspx page in the midlle div(content div)
depending on the link click.Like this:
$('#LeftMenu1_HyperLink1').live("click", function(event) {
event.preventDefault();
$("#ContentDiv").load("mypage.aspx");
});
this solution doesn't work,i have followed the jquery doc.Do i should add some thing in mypage.aspx,all the examples i found i found googling don't work.
Can someone pls give me a working link or an example for that.
The best thing you can do (short of only responding with the requested content) is have a container in there, like this:
<div id="ContentDiv">
<div id="ContentInner">
</div>
</div>
This is to prevent multiple IDs in the page when doing the .load(). Since .load() takes a selector you'd then use that to get the content, like this:
$('#LeftMenu1_HyperLink1').live("click", function(event) {
event.preventDefault();
$("#ContentDiv").load("mypage.aspx #ContentInner");
});
Now this loads only that inner <div> onto this page.
Some considerations to this approach you're taking:
Scripts/styles in the <head> won't be loaded
Be sure your <form> is inside that <div id="ContentInner">
You're embedding a full HTML document into a <div> element. The result will look like this:
<html>
<head>
.
.
</head>
<body>
<div>
<html>
<head>
.
.
</head>
<body>
.
.
</body>
<html>
</div>
.
.
</body>
</html>
The browser won't be able to do anything with that. Try loading your page in an <iframe> element instead of a<div>.