Does anyone know why the following code isn't working:
The image remains towards the left of the screen.
HTML:
<div class"footerimg">
<img src="./img/logo2.png" width="100px;" height="100px;">
</div>
CSS:
.footerimg {
float:right;
}
Additional Info:
This div is inside another div called footer, but that shouldn't affect anything should it?
The CSS file IS linked to the page, I have started the style the footer.
error :
<div class"footerimg">
should be
<div class = "footerimg">
__^^^^__missing equal sign
try this:
footerimg>img{float:right;}
and add this in your html code:
class="footerimg"
you forgot the '='
Related
As described here How to ng-hide and ng-show views using angular ui router, I have the following markup:
<div class='container'>
<div ng-show='$state.includes('state1')></div>
<div ng-show='$state.includes('state2')></div>
</div>
Using flex-box in css:
.container {
display: flex;
flex-direction: column;
}
Now it when I switch between the two states both divs are displayed for a blink of an eye resulting in an ugly blink effect.
I tried ng-cloak from Angularjs - ng-cloak/ng-show elements blink, but without any success.
I can't use ng-if since I use 'Sticky State' from ui-router-extras, which requires the DOM to persist.
$state won't be available to use in HTML so
1) you can do something like this in Ctrl
$scope.state = $state;
but i won't recommend this
2) In HTML
<div class='container'>
<div ng-show="showThis('state1')"></div>
<div ng-show="showThis('state2')"></div>
</div>
In Controller
$scope.showThis = function(type){
return $state.includes(type);
}
Even though you already mentioned that you have tried ng-cloak, I think that the right answer to your issue is indeed ng-cloak with the:
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
style configuration. I have made an example on CodePen.io that show exaclty this solution working with Angular UI Router. As you can see in the example, the whole view blinks as you mentioned but, if you add the 'ng-cloak' directive to the:
<div ng-app="myApp">
which will then become:
<div ng-app="myApp" ng-cloak>
you will see that Angular protects the view from being showed (blinking). And that is exactly the purpose of the of the 'ng-cloak' directive.
Hope this example help you solving you issue.
You can use ng-style to remove the flicker effect.
<div class='container'>
<div ng-style="{'display': $state.includes('state1') ? 'block' : 'none'}"></div>
<div ng-style="{'display': $state.includes('state2') ? 'block' : 'none'}"></div>
</div>
I'm not sure why ng-show triggers a flicker effect with sticky states, but this workaround fixes the issue.
I have a situation where I need to access a div which is dynamically generated by jQuery mobile.
How can I access this using CSS ? I need to change UI of the inside div.
Following is the HTML structure.
<div id="myCreatedDiv">
<div class="jQueryMobileCreatedDiv">
/* I need to access this div */
</div>
</div>
Note: Above structure I found in chrome's element inspector
My original code is as follows
<div id="one" class="myDiv" ui-body-d ui-content">
<input name="anyName" id="jQueryTextBox"/>
</div>
It would be very helpful if anyone can help me for the same.
Thanks in advance!
You can acces div inside .jQueryMobileCreatedDiv is like this:
var divInside = $('.jQueryMobileCreatedDiv').children("div");
Use this CSS selector:
#myCreatedDiv > div { /* Your CSS here */ }
You can use it.
$('#myCreatedDiv').find('#one');
or
$('.jQueryMobileCreatedDiv').parents('#myCreatedDiv').find('#one');
You can use the class of the generated div
#myCreatedDiv > .jQueryMobileCreatedDiv {
}
On this link I've build a simple html/css based layout. What I want to achieve the following: I want that the content section gets a overflow-y as soon the window height is smaller then the content height. The footer and header need to stay in the same position. Only the content section must be smaller.
This sounds very simple, but to my own surprise I couldn't find a solution yet. I'll tried to add some max-/min-height and overflow values to the content section, but this wouldn't work.
Would be awesome if someone could help me out. Thanks
I would use a combination of CSS and jQuery addClass() as follows (I am calling the content section #Content, let's say 600px for this post):
//css
#Content {
height:600px;
//etc.
}
.contentoverflow {
overflow-y:scroll;
}
Now on page load, add an onload function to the body (note that the Content div lacks any classes):
<body onload="checkHeight()">
<div id="Content">
<!--Your content goes here-->
</div>
Now the JavaScript / jQuery:
function checkHeight() {
var scr = screen.availHeight;
var contentHeight = 600; //or whatever number you choose)
if (contentHeight > scr) {
$("#Content").addClass("contentoverflow");
}
}
I am working within bootstrap's core admin structure and have a main header at the top of the page and then a sub header beneath it. I am trying to allow that sub header to fix to the top of the page when the user scrolls down so they can always see that information, but I am having a bit of trouble.
The section I would like to stick to the top looks like this.
<div class="area-top clearfix" >
<div class="pull-left header">
<h3 class="title"><i class="icon-group"></i>Dashbord</h3>
</div><!--.header-->
<ul class="inline pull-right sparkline-box">
<li class="sparkline-row">
<h4 class="blue"><span> Cover Designs</span> 4</h5>
</li>
<li class="sparkline-row">
<h4 class="green"><span> Video Trailers</span> 5</h5>
</li>
<li class="sparkline-row">
<h4 class="purple"><span> Web Banners</span> 5</h5>
</li>
</ul>
</div><!--.area-top-->
and I have tried so far to wrap that in another div with the navbar navbar-fixed-top classes. But that shot it to the top right away and overlapped content that needs to be seen.
I have also tried using plain css by adding position:fixed; to the current div, but that messes up the breadcrubms I have laying underneath it because it takes it out of the flow.
Is there anyway to accomplish this with just css. I know I can do a hack with jquery, but in my team I am only in charge of the css.
you can use below css to the sub header navbar.
css:
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}
Add 'sticky-top' class to sub header.
for eg: you can see the fiddle below which is similar to the question.Here second menu fixed to top when user scrolls.
https://jsfiddle.net/raj_mutant/awknd20r/6/
position:fixed is the way to go here. Can you apply a height to the div you want to be fixed and apply a margin to the breadcrumbs?
.area-top{ position:fixed; height:2em; }
.breadcrumbs { margin-top: 2.2em; }
My point of view is the following. When you ask for this :
to fix to the top of the page when the user scrolls down
It means that you need to detect when users are scrolling. Furthermore, there is no other way than js / jQuery to detect this kind of action. CSS can be a part of solution by creating a class for exemple which will stick your menu, but you'll always need a bit of js to detect when to put and to remove the class.
Here is an exemple on how to do this in jQuery :
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).scroll(function(){
var offset = $('.area-top').offset().top;
var top = $(document).scrollTop();
if(top >= offset){
// this is where you should fix you menu
$('.area-top').addClass('fixed'); // if you have a css class which fix the element.
$('.area-top').css('position', 'fixed'); // if you don't have css class
}else{
// this is where you should unfix your menu
$('.area-top').removeClass('fixed'); // if you have a css class which fix the element.
$('.area-top').css('position', 'inherit'); // if you don't have css class
}
});
</script>
Don't forget that every "advanced" action which need to detect a change in the DOM or which need an user interaction will require some JS or PHP to deal with it. By "advanced", i'm meaning all the things that can't be natively handle in HTML.
I have code that looks like this:
<h4 class="tableTotals">Total Selected: R<div id="bankTotal">##,##</div></h4>
The output that I want should all be in ONE line but as it turns out the div tags displays it's content in a new line, which I don't exactly want. So the output looks like this:
Total Selected: R
##,##
When I actually want it to display like this:
Total Selected: R##,##
Does anybody know how to stop the div displaying on a new line?
Thank for any push in the right direction!
Use <span> instead of <div>
div is a block element, and h4 is a header meant for single line.
Style your div to be displayed as inline-block
#bankTotal { display: inline-block; }
Demo
Using inline-block does not have to chang the div completely into as inline element just like span . Furthermore, you can still have block properties.
<div> is a block element and will put a return before and after the <div>
You should use instead.
<h4 class="tableTotals">Total Selected: R<span id="bankTotal">##,##</span></h4>
Using CSS:
#bankTotal{
display:inline;
}
div displaying on a new line ?
<div id="bankTotal" style="display:inline">##,##</div>
or
<div id="bankTotal" style="float:left">##,##</div>
but better :
<span id="bankTotal" >##,##</span >
display:inline property of css for displaying the div "inline",
or u could use <span> tag instead of <div> tag ..
<h4 class="tableTotals" style="display:inline;">Total Selected: R<div id="bankTotal" style="float:left;">##,##</div></h4>
Here I have added a style to position the DIV manually to where you want it to be. Please note that I didn't put it in its exact position so just fiddle with the margin PX.
<h4 class="tableTotals">Total Selected: R<div id="bankTotal" style="margin-left:50px;margin-top:-10px;">##,##</div></h4>