I'm currently working on an Angular 2 project that implements the fullpage.js port found here https://github.com/meiblorn/ngx-fullpage. I'm trying to implement scrolloverflow on one of my sections and I'm unsure of how to do it. I have included the necessary .js files in my angular-cli.json file.
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/fullpage.js/dist/jquery.fullpage.min.js",
"../node_modules/fullpage.js/dist/jquery.fullpage.extensions.min.js",
"../node_modules/fullpage.js/vendors/scrolloverflow.min.js"
],
Here is some html code where i'd like to have the second section be scrollable when there is enough content.
<div mnFullpage>
<div class="section welcome-section fp-section fp-table">
<div class="fp-tableCell">
1
</div>
</div>
<div class="section welcome-section fp-section fp-table">
<div class="fp-tableCell">
2
</div>
</div>
</div>
You can now change to the official Angular component for fullPage.js, which is maintained and always kept up to date with the new fullPage.js features and extensions.
Repo: https://github.com/alvarotrigo/angular-fullpage
Demo page: https://alvarotrigo.com/angular-fullpage/
Related
I am building an SPA without a framework and I am stuck on how to manage to show and hide 3 views that I have on the same page and include routing. I found jQuery Mobile that does perfectly the trick with the data-role="page". However, it ruins my css and it's outdated so not expected to work in the near future?
here is how my code looks like :
... fixed header ...
<div id="Page1" class="wrapper" data-role="page" data-transition="slide" >
content view one
</div>
<div id="Page2" class="wrapper" data-role="page" data-transition="slide" >
content view two
</div>
<div id="Page3" class="wrapper" data-role="page" data-transition="slide" >
content view three
</div>
... fixed footer where music is playing and want to keep it playing while moving from one page to another ...
Any idea how I can achieve this without having to use/learn a framework like react or angular??
thanks in advance
So I'm on this page:
http://v4-alpha.getbootstrap.com/getting-started/flexbox/
I am trying to enable bootstrap flex so I can use it in my application. Down at the bottom it tells you to head to a download page and installed the compiled CSS version with flex box enabled. So I uninstalled bootstrap from my application and ran this line in the package manager console:
PM> Install-Package bootstrap -Pre
This installed the _variables.scss file with enableFlex set as true.
It also downloaded bootstraps.css/min files and also the appropriate bootstrap JS files. I also installed tether via NuGet because bootstrap required this.
I copied this code from the bootstrap website:
<div class="container">
<div class="row">
<div class="col-xs">
1 of 2
</div>
<div class="col-xs">
1 of 2
</div>
</div>
<div class="row">
<div class="col-xs">
1 of 3
</div>
<div class="col-xs">
1 of 3
</div>
<div class="col-xs">
1 of 3
</div>
</div>
</div>
Which is meant to use flex box to display some divs. However, when running the application they do not show how their supposed to show. Follow this link and scroll down to see what it's supposed to look like:
http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#auto-layout-columns
I have no console errors, I can't see what I'm doing wrong. I believe it may be an issue with the bootstrap download as the css file downloaded does not have the .col-xs class. Only the col-xs-1 and up classes.
Does anyone know how to enable the flex features in bootstrap 4?
Right well I managed to get the thing working. I do believe that there is an issue with the bootstrap download or at the very least the wording on the website.
The way I managed to get it to work was like so:
Run this in the NuGet Package Manager Console
Install-Package bootstrap.sass -Pre
Install Ruby
Install sass via Ruby CMD
I put a watch on the whole folder of the bootstrap scss files
This then generated me all the css files I needed. I then used the bootstrap-flex.css file on my view and it worked.
Why it says to download the compiled flex css on the page I don't know.
My module position in my Joomla template is just a div with a "row" class. When I add content to that module position using the custom html module and give it module class suffixes of "first", "mod-light" and "bord-left"it appears to nest 2 divs within my module position both with the same classes which is causing problems. How do I modify this so that it is not creating this nested structure or at least does not apply these classes to the inner div?
For example, if I simply entered this raw html into the editor...
"<p>...entered content appears here...</p>"
I would get this output from Joomla...
<div class="moduletable first mod-light bord-left span4">
<div class="custom first mod-light bord-left">
<p>...entered content appears here...</p>
</div>
</div>
How can I make Joomla do this instead...
<div class="moduletable first mod-light bord-left span4">
<p>...entered content appears here...</p>
</div>
You can use custom module chrome to create your own module layouts:
http://docs.joomla.org/Applying_custom_module_chrome
I am using
$('#result').load('http://.... #div');
to get the content of external website. I edited the domain whitelist for PhoneGap. It is working, if I set this page as the index page. However, it can't function well when it is set as the next page by submitting a form. Content from external website is not shown. How can I solve it? Thank you
It's better to use a javascript framework for this and still use a single index.html file. Best practice i have come across is to make an application not multiple html files. There are many frameworks to accomplish this the best documented is jquerymobile.
Using JQueryMobile in your javascript file you would check when page1 div loads using jquerymobile then run your .load code.
JQueryMobile has differen't events it looks out for..in this case before page initiates (pageinit) you want to run the load thing to grab content from the other website.
$( "#page1" ).live( "pageinit",function(){
$('#result').load('http://.... #div'); //place your load here..you can even $.post(function(){..}); to a php script to get exactly what you want.
});
Your html file inside the body tag will have this and of course you need to include jquery and jquerymobile js and css files in between your head tags.
<div data-role="page" id="home" data-theme="a">
<div data-role="header">
<h1>Welcome</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li class="btn_a">Page1</li>
<li class="btn_s">Page2</li>
<li class="btn_l">Page3</li>
</ul>
</div>
<div data-role="footer">
<h4>Your Brand</h4>
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header">
<h1>Page1 Heading</h1>
</div>
<div data-role="content">
<h1>This is Page1</h1>
<div id="#result"></div>
</div>
<div data-role="footer">
<h4>Your Brand</h4>
</div>
</div>
I am very new to Jquerymobile,html5 and css.Now I am working on jquerymobile project in that i need to display the html code which i am getting from rest service in a page and i am doing by using the following code.
<div data-role="content" style="width:700px">
<div id="html_content">
</div>
</div>
and javascript is
$("#paystub-html").live('pageinit',function(){
$.getJSON(url,function(events){
$(events).each(function(i,item){
$(item.Data).appendTo($("#html_content"));
});
});
});
I can display the html but not fully its not scrolling horizontally.I tried by using overflow tag also but its not solved.
Is there any other way to do that one ? how ?
Thanks in advance.
This situation can be solved with overflow, but you will first need to remove the width from the content to have things handle properly
<div data-role="content">
<div id="html_content" style="overflow-x:scroll">
</div>
</div>
You can test it here
By the way, jQuery mobile standard usage would require you to include your content in a page container.