I use materializecss to create a slider.
However the image is full width, but not full height(its more than full height, so i get scrollbars). What do i need to change to make the slider fill out my screen with no scrollbars? I also use $('.slider').slider({full_width: true});
<div class="navbar-fixed">
<!-- some stuff-->
</div>
<div class="container-fluid">
<div class="carousel carousel-slider center">
<a class="carousel-item"><img class="responsive-img" src="http://lorempixel.com/800/400/food/1"></a>
</div>
</div>
If you just want to hide scrollbars then add
overflow: hidden;
To container which is having the scroll
Are you using the correct JavaScript?
On Materialize's site (I've used Materialize before, and thought something looked off about your code) it has this as the way to initialize a slider as "full_width:"
$('.carousel.carousel-slider').carousel({full_width: true});
In fact, your slider doesn't even have the .slider class; it only has .carousel-slider and .carousel.
I'm thinking if you use the above JavaScript you should be alright.
Related
I am developing a web application using AngularJS.
I have a problem: in an HTML page I needed to show a table that dynamically show the number of rows based on a user's choice. I achieved this effect using a script and bootstrap rules.
I won't go into details, but I just show you the high-level code and a screenshot of the result:
HTML code:
<script type="text/ng-template" id="custom/pager">
<ul class="pager ng-cloak">
<!-- Code of the element drop down menu.....-->
</ul>
</script>
<div>
<ng-form >
<div class="panel panel-default table-panel noborder">
<div class="table-responsive">
<table ng-table-dynamic="$ctrl.tableParams with $ctrl.cols" class="table" template-pagination="custom/pager">
<!-- Code of the table.......-->
</table>
</div>
</div>
</ng-form>
</div>
The result is something like that:
My problem is that no type of CSS code seems to work to move the dropdown menu position to this position:
I tried to use position (relative, absolute, fixed) and also to encapsulate the <script> element inside <div> or <span> and refer it with CSS rules. But nothing seems to work! The dropdown menu always remains at the bottom and center of the page. I guess it's bootstrap's fault. Can you tell me how I can resolve this issue?
The pagination buttons are working. If the css should also work. You can place the below code into the codepen to see the effect.
Codepen
.table{
position:relative;
}
.ng-table-counts{
position:absolute;
top:0;
right:0;
}
So I have an episerver block for form. On desktop and large screens, the form is displayed with an image to its right. On smaller screens the image is hidden.
When the image is hidden, I would like to make the form wider to fill up the missing space. The image does not have its own div class. It is the background image of the containing div.
<div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(#Url.ContentUrl(Model.CurrentBlock.Image))">
<div class="row">
<div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(#Url.ContentUrl(Model.CurrentBlock.Image))">
<div class="row">
<div class="#(!ContentReference.IsNullOrEmpty(Model.CurrentBlock.Image) ? "col-sm-7 col-md-8" : "col-sm-12 col-md-12")">
<div class="whitepaper">
</div>
</div>
</div>
</div>
</div>
</div>
I have also modified the above so that when a form is not included in the page through the EPIserver editor that the row should be full width by default.
My css for .gatedbg
#media (max-width: 960px) {
.gatedbg {
background-image: none !important;
}
}
Is there a method either in EPIserver or ASP.Net/MVC to detect when the background image is hidden from view in the browser?
If I understood correctly, I cannot use javascript in this razor page because it is server side code?
These pb-5 pt-3 classes presumably are part of some grid system, that is responsible for the column widths? Do the 960px correspond to one of the responsive breakpoints used by that system?
If so, you probably just need to set different classes (that make the form take full width, and hide the “image” column completely);
otherwise you might need to overwrite the width coming from those classes explicitly in your stylesheet.
I've been playing with Scrollmagic and managed to get a few things working. What I'm trying to do right now is create a sticky social sharing bar for my blog at the bottom of the viewport. I've had no issues managing to get it to show up with my code
// Sticky Share Bar
var stickyShareAnimation = TweenMax.fromTo(shareBar, 0.5,
{ bottom:-50},
{ bottom:0 }
);
var share = new ScrollMagic.Scene({
triggerElement: '.entry',
offset:60,
})
.setTween(stickyShareAnimation)
.setPin('.share-bar')
.addIndicators()
.addTo(controller)
This is the HTML
<section class="share-bar">
<div id="share-container" class="container">
<div class="row">
<div class="col-md-12">This is the content</div>
</div>
</div>
</section>
<section class="blog-content">
<div class="container">
<div class="row">
<article class="single-post">
<div class="entry">
<?php the_content();?>
</div>
</article>
</div>
</div>
</section>
<section class="Test">
Where I want sharebar to tweenout.
</section>
I know I could fade out the sharebar with another Tweenmax animation targetting the "section Test" but figured there was probably a better way to do so with my initial javascript. Is there another way or would I need to create a seperate Tween for the sharebar to hide after content (div.entry) finishes.
Codepen http://codepen.io/anon/pen/aOWBQZ
If you want scrollbound animation (scene duration > 0) then yes, you should create one scene for animating the header in and one to animate it out again.
If you want to trigger an animation and animate the same property (i.e. opacity, when fading in and out) using ScrollMagic's setTween method, there will be problems related to property overwriting.
For details see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another
NOTE: The wiki was written for ScrollMagic 1.3, but the same principle applies.
The recommended solution is this (Updated for ScrollMagic 2.x):
http://jsfiddle.net/xk22Lx50/
An easier solution however might be to define a CSS class and use setClassToggle to add or remove it for a certain time.
Animation can be achieved using CSS animations.
See: http://scrollmagic.io/examples/basic/class_toggles.html
And one more thing:
If your pinned element is always pinned (as in your example) and just animates in or out, but is never part of the DOM flow, there is no reason to make it sticky (i.e. to use ScrollMagic's pin functionality).
Just set it to position: fixed in css and you're done.
You can still use ScrollMagic to animate it in and out, but have less (unnecessary) JS code.
I'm creating a mobile website with jQuery, and I was wondering if there was a way to align a list to the bottom of a page, I just want the list to stay at the very bottom of the page, and be fixed in the spot. Thanks
This is the list im trying to get fixed on the bottom of the page:
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li><img src="file.jpg" /><h3>List name</h3>
</li>
</div>
What about using position:fixed?
sample: http://jsfiddle.net/zmjhQ/4/
update: revised fiddle
You can use css absolute positioning.
#list {
position: absolute;
bottom: 10px;
}
edit based on your code sample, in jquery:
$('.content-primary ul').css('position', 'absolute').css('bottom', 0);
If you are using jQuery Mobile, you can wrap the element in a div with data-role="footer" and it should do what you want.
See this tut in net.tutsplus.com: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-an-rss-reader-with-jquery-mobile-2/
As class of div is CONTENT-PRIMARY so track this div using "". operator of jquery as ::
emphasized text$('.content-primary') and then place the part of css in it as explained by Jake Feasel
One thing make sure the class you specify for catching the div is same as you specify in the property of div class.
I'm using Jqtouch to design a iphone app.
As I'm using a standard header/toolbar at the top, I want to simply have it fixed there without moving. I found out how to do this by creating a div with class toolbar and setting CSS display to block and min-height to 0px with important.
However, when it starts up and every time I change pages (technically, it's making different divs display and not display(?)), it autoscrolls to the top of the div that it just changed to, and I need to scroll up to see the toolbar (the toolbar is at the very top, above the div).
How do I make it actually scroll up to the toolbar or top of the page?
Here's a simplified layout of my current code: (For body section)
<body>
<div id="toolbar" class="toolbar" style="display: block; min-height: 0px !important;">
<h1>Header</h1>
<a class="button" href="#">Button</a>
</div>
<div id="home" class="current">
<!--Content in here-->
Link to next page
</div>
<div id="next">
<!--Content in here-->
</div>
</body>
I am not entirely sure I got your question, but It sounds like you want to have an element with "fixed" position. If that's the case, you may want to try the solution I posted for this question.