I want to develop a web page with following details.
I have three different drop down menu & 9 images & 1 submit button.
So according to drop down combination I can see 9 different images with help of Submit button.
Please suggest me .
I suggest you use bootstrap for your html responsive designs like drop down menu and submit buttons and javascript related functionality.
Find bootstrap tutorial in tutorialspoint.com.
All you need if just to use the appropriate class in the tag to make a drop down.
Like example:
<div class="nav-bar">
<ul class="dropdown">
<li>my list</>
</ul>
</div>
thats how easy it can be to make a drop down menu with bootstrap.
Find the tutorial or search for it in google with this search query: "tutorialspoint: bootstrap tutorial"
Related
i am using joomla rocketTheme Chapelco and want to display an article in the rokbox popup but without the menus, footers, etc. I just want the article contents.
I can get the article to display in the popup using link params data-rokbox as shown here
Submit
but this displays the article with the full site menus, footers, etc.
Appending &tmpl=component to the url should fix this:
<a href="index.php?option=com_content&view=article&id=200&tmpl=component"
data-rokbox
data-rokbox-elemnent="#rt-popupmodule"
class="btn btn-xs btn-info">Submit
</a>
See https://stackoverflow.com/a/15333993/1983389 for more details.
I planned to use materialize:materialize package to a meteor app. As I can understand materialize use a lot of javascript for effects, collapsing and so on. Meteor has its own event handling but I suppose materialize will use jquery (I suppose I don't need to add jquery, it's included, or?) and will be running outside meteor events.
Is it enough to just add the package and everything will work, not just the look but also the javascript (feel)? I am trying to get it to work with a materialize template I bought and its not optimezed for meteor so I have problems to make it work.
Has anyone try this setup and is there any suggestions for good sources.
Using materializecss with Meteor works great, but you will have to initialize jQuery plugins yourself (just like in a regular HTML5 app without Meteor, as Materialize docs hints at).
Meteor templating system includes automatically jQuery, and you will have to use template.onRendered to correctly initialize the plugins, as opposed to initializing them in a $(document).ready callback.
For example, here is a simple Materialize dropdown markup inside a Meteor template :
<template name="myDropdown">
<a class="dropdown-button" data-activates="my-dropdown">
My Dropdown <i class="mdi-navigation-arrow-drop-down right"></i>
</a>
<ul id="my-dropdown" class="dropdown-content">
<li class="js-first-item"><a>First item</a></li>
<li class="js-second-item"><a>Second item</a></li>
<li class="divider"></li>
<li class="js-third-item"><a>Third item</a></li>
</ul>
</template>
And here is the according plugin initialization :
Template.myDropdown.onRendered(function(){
this.$(".dropdown-button").dropdown({
hover:false
});
});
You should use standard Meteor events to handle user interaction :
Template.myDropdown.events({
"click .js-first-item": function(event, template){
console.log("clicked on the first item !");
},
[..]
});
Overall, your Materialize theme integration into your Meteor app is not something as trivial as droping the theme inside your source files and meteor adding materialize:materialize, but it should not be something overly difficult.
Sometimes you'll hit Meteor related issues when trying to initialize Materialize plugins but the corresponding markup is not yet rendered into the DOM, see this question for a possible solution : Meteor + Materialize: collapsable in for each doesn't work
I am new to web development..
i have created views using Entity Framework in MVC3 Razor..
What i have done yet is,
i 1st created model(Clients) and DbContext(ClientDbContext) Classes.
then, i add controller with scaffolfind options
Template: Controller with read/Write actions and View, Using Entity Framework
Model Class: Clients
Data Context Class : ClientDbContext
Views : Razor(CSHTML)
It Creates the controller class and index, Detail, Delete, Delete Views...
After that i modified the index page for search and pagination...
All are working good...
in the index page i have create, edit, delete, detail links...
When i click the links browser loads to that page and working good...
But i need to popup those views when i click the links in the index page...
i don't know how to do this... i studied many articles but i am confused...
Please help me to solve this with an efficient manner...
Thanks in advance...
Creating a model pop-up within a page isn't something that can be done directly with ASP.NET MVC. You could do it yourself using javascript & css but I would strongly recommend using a JS UI framework to do this. jQuery UI has a pop-up modal box, except they call it a dialog.
The docs for jQuery UI's dialog can be found here. Have a look through the examples to see the fine details of how to set it up. But this is the basic flow of what you need to do:
Download the jQuery UI files needed and include them on your page (CSS/JS files)
Take the html from your create/update/delete views and put it on your index page, wrap them in a div with an appropriate id
When the page loads use jquery ui to target your div's you want to be a popup
Things such as the link you want to make a dialog popup is set by passing options to the dialog initialize method, again the exact options and examples can be found on the docs page.
Refer this : http://jqueryui.com/dialog/ to create a jQuery Dialog box.
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog">
#using(Html.BeginForm()){
#Html.EditorForModel()
<input type='submit' value ='Submit'/>
}
</div>
I have started a meteor application using the accounts packages for facebook, twitter, github and auth accounts. For UI, I am using the bootstrap package. Whenevee I load my site projectx.meteor.com, the login links take some time
I have everything static on the HTML page, except for the link to login:
client/x.html:
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>{{loginButtons}}</li>
</ul>
</div>
There is no JS on the client side and I have called the startup method on the server.
Server/startup.js:
Meteor.startup(function () {
});
Also, when I visit the above URL from IE 9 on my Windows Phone 7.5, it doesn't show the login link at all.
Update: After the comment below, I modified my code to remove packages and additional HTML. The packages now included are:
preserve-inputs
accounts-ui
accounts-password
accounts-facebook
accounts-twitter
accounts-github
I have removed bootstrap and the only thing on my template now is {{loginButtons}}, It still loads the login link after a delay. Is this the default behavior of the accounts package ?
The reason why the buttons take so long to load is because Meteor has to ask the server-side for the necessary configuration information (located in a collection in your Mongo instance) before it can render the login buttons for each of the external services you want to use. I think the best solution (and the solution I use) is to simply build the buttons client-side if you want faster results or tweak the login buttons template to allow for data ported in from the client-side using a JSON object with all the OAuth keys it needs.
As you say, this is the default behavior.
There is no problem about bootstrap or js in your code.
I cant explain exactly why but it works that way.
Is there a way to simulate the data-rel="dialog" attribute to show a page as a dialog page?
I can't use this one because I use the button for the LogIn/LogOut model, and this one doesn't work if I don't insert the data-ajax="false" attribute.
But using this I cannot use the ajax-based data-rel attribute.
So I need a trick to create a dialog page without using the dialog attribute on the anchor link.
Thanks
Hopefully in the next iteration of jQM ( 1.2 ) you could use the Popup, You can currently test this out in the pre-release builds:
http://jquerymobile.com/test/docs/pages/popup/index.html
or a form login