I followed the tutorial on the site to get inline content working. Even checked their source and made changes to my own site.
Here is the site: http://miuzer.com/new/
Check the links in the upper right. About works, but register and login don't as their content is inline. What is the issue here?
I find a lot of js libraries are buggy, overcomplicated and poorly documented, fancybox is one of the worse.
Delete this line:
<a id="popup_img" style="display:none" href="img/popup_img.jpg"><img src="img/popup_img.jpg" alt="" /></a>
Alter about/register/login part like this:
<div class="header-content">
<ul>
<li>About</li>
<li>Register</li>
<li>Login</li>
</ul>
Delete these lines from interface.js
$('#popup_img').fancybox();
$('#register-dialog').fancybox({'type':'inline'});
$('#login-dialog').fancybox({'type':'inline'});
// $('#popup_img').click();
and add this line instead:
$('.header-content ul a').fancybox();
By the way, it's a very well documented and well written plugin and I can't say same thing for your code...
Related
I know it has been explained in many places here but I can't get it to work.
It concerns: how to use JavaScript which is in - under wwwroot created - folder in a *.js file.
What I am using:
Blazor Server App empty (VS2022, C#).
I only need/use Server App in VS2022 C# and empty - without any predefined navbars and other elements. So there are no any *.cshtml files except one which is automatically created while creating a "Blazor Server App Empty" in VS 2022 and that is "_Host.cshtml"
And I don't want to use any other template in VS 2022, only this one mentioned.
So, after creating a "page" using this in VS integrated template, I added following in MainLayout.razor (I am using *razor and only razor - no any cshtml):
// this was originally created as in the template in VS2022
#inherits LayoutComponentBase
//this one also:
<main> #Body </main>
// That is what I added here in MainLayout.razor, it's from this site: [http://jsfiddle.net/Ag47D/3/](https://www.stackoverflow.com/)
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li id="home">Home</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="link">Link</li>
</ul>
</div>
</div>
</div>
</div>
And then I added the css part to the existing "site.css" in that simply VS 2022 project:
`.navbar #nav > .active > a {
color: red;
}`
And finally - and that is the big issue for me to understand WHRE/HOW to handle that . a simply JavaScript part (you can find that on the same site mentioned):
` $(function() {
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});`
I added that to a created folder in wwwroot, the flder is called: "js" and the file inside that folder is called: "setactivetab.js". In that file is the mentioned part of javascript.
In "_Host.cshtml" I added then that, here the part of that _Host.cshtml where you can see what I added:
`....
....
Reload
<a class="dismiss">🗙</a>
</div>
<script src="~js/setactivetab.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>`
So I tried with:
<script src="~js/setactivetab.js"></script>
and:
<script src="js/setactivetab.js"></script>
and:
<script src="~/js/setactivetab.js"></script>
But nothing worked. I mean: TABS are shown on the page - no question about that - but if I click on one of that TABs - nothing happens, the color isn't changed.
Somehow I am not able to understand how to use a self created/from google downloaded, JavaScript for simply changing of the color or to set a selected TAB as active/current or however we can use that.
I tried so many examples described on the web. I can't get that working - maybe I am missing/not understood some fundamental knowledge of using a JavaScript. I simply don't know the way how one can use that.
Can you please post me here a working example of a navigation TABS, ideally self created and simply? Important is: WHERE to put a javascript and how to access that properly so the clicking on a TAB wil lchange his color and stay so until I click on another TAB in a simply - if possible: horizontal, not vertical, navigation bar.
I have enough from searching/reading of many web sites descriptions as there works all and if I copy&paste some simply example, it doesn't work.
I'm working on a vanilla javascript project so I cannot use jQuery. I'm trying to use the following to move some HTML from one placement to another:
parent.appendChild(element);
I'm trying to place the forms into a different placement as I placed in the comment in my HTML code. I'm trying this but it's not working at all.
Javascript:
var loginButton = document.querySelector('[data-login-header-button]');
var loginDropdown = document.querySelector('[data-login-dropdown]');
var shopCartButton = document.querySelector('[data-shopping-cart-header-button]');
var shopCartDropdown = document.querySelector('[data-shopping-header-cart]');
shopCartButton.parentNode.appendChild(shopCartDropdown);
loginButton.parentNode.appendChild(loginDropdown);
HTML:
<header>
<nav data-nav-services>
<ul class="nav-services">
<li data-test>
<a class="icon icon-shopping-cart icon-arrow-down" href="#" data-shopping-cart-header-button>
shopping cart
</a>
<!-- PLACEMENT FOR data-shopping-header-cart -->
</li>
<li>
<a class="icon icon-user icon-arrow-down" href="#" data-login-header-button>
Login
</a>
<!-- PLACEMENT FOR data-login-dropdown -->
</li>
</ul>
</nav>
<form class="login-dropdown" data-login-dropdown>
...CONTENT...
</form>
<form class="shopping-cart" data-shopping-header-cart>
..CONTENT..
</form>
</header>
The strange thing is that if I turn around the selectors (as here below) it does work and I cannot explain why...
shopCartDropdown.parentNode.appendChild(shopCartButton);
shopCartDropdown.parentNode.appendChild(loginButton);
When you do:
shopCartButton.parentNode.appendChild(shopCartDropdown);
loginButton.parentNode.appendChild(loginDropdown);
It actually works. It is just not showing anything since the forms are empty. Check your Dev Tools and inspect your HTML.
For anybody who wish to know, the code was perfect. The issue was that I was appending this form elsewhere of my code. So there was a conflict as one had a priority over the other. I could use .cloneNode(true) as a solution. I ended transforming that appending to my new goal and solved the issue.
Anybody out there... check all the code for any other appending of the same element. Good advice ;)
I'm having problems getting Foundation orbit to work. I can call it from regular HTML and it works fine but when I try to use dynamically generated Handlebars HTML, it does not load.
The page is here: http://danheidel.github.io/resume-foundation/#art-contact
The non-functional Orbit carosel is above, the functioning one is at the bottom of the page. (formatting on the latter is a bit screwy since it's not in the Foundation grid)
Source is here: https://github.com/danheidel/resume-foundation
I'm not seeing any errors on load so I suspect that Orbit is not firing on the dynamically templated HTML. Has anyone gotten Orbit to work with templating?
The dynamically generated HTML from Handlebars is below. As far as i can tell, it's all formatted properly.
EDIT: I'm almost certain that Orbit is not firing because it doesn't intercept HTML changes after the initial page load. I tested by having JQuery post-load modify a div with the proper HTML and Orbit did not intercept that either. Can anyone tell me how to get Orbit to fire post-load?
<div class="panel" id="minor-panel">
<h3>Contact</h3>
<ul data-orbit="">
<li>
<img src="img/contact part3_lbox.jpg">
<div class="orbit-caption">caption 1</div>
</li>
<li>
<img src="img/contact part4_lbox.jpg">
<div class="orbit-caption">caption 1</div>
</li>
<li>
<img src="img/contact part5_lbox.jpg">
<div class="orbit-caption">caption 1</div>
</li>
<li>
<img src="img/contact part6_lbox.jpg">
<div class="orbit-caption">caption 1</div>
</li>
</ul>
</div>
Ugh, poor showing Stack Overflow. :(
Anyhow, I dug through the JS and found the answer. Just make a call to:
Foundation.libs.orbit.init();
after each HTML update and it will properly format the slider.
Basically.... Get this working... JSFiddle!
I am trying to use the jQuery plugin for filtering items inside 3 UL's. (Each <ul></ul> will have a unlimited amount of list items.)
The plugin I am using is located at the link below (Quicksand) (along with the documentation & demo).
Quicksand: http://razorjack.net/quicksand/
Documentation http://razorjack.net/quicksand/docs-and-demos.html
The plugin will basically filter the results of the items contained within my <ul></ul>.
I attempted this on a number of occasions, but I am getting no console errors or anything to point me where I am going wrong, and have no idea why its not working.
I have 3 <ul class="column"></ul> tags each with list items below them (3 in this case). I need to be able to filter (and animate) all of them, using the plugin.
I have also made a - JS Fiddle - with my code for you to play with. (Quicksand is included as a 'resource').
The basic structure of my HTML is:
Menu
<!-- On click of these, filter according to 'data-value' -->
<ul id="definations" class="wrapper">
<li>all</li>
<li data-value="web">digital - web</li>
<li data-value="iphone">digital - mobile</li>
<li data-value="android">branding & print</li>
<li>event</li>
<li>motion</li>
</ul>
Content to Filter
<div id="portfolio" class="wrapper">
<ul class="column">
<li class="work item" data-id="id-1" data-type="iphone" data-title="iPhone" data-project="iPhone and Android App" data-year="2012 Project">
<img src="/css/img/product/work-demo1.png" alt="Omega"/>
<a class="view" href="javascript:;"></a>
</li>
<li class="work item" data-id="id-2" data-type="android" data-title="Android" data-project="Rich Web Application" data-year="2012 Project">
<img src="/css/img/product/work-demo3.png" alt="Description"/>
<a class="view" href="javascript:;"></a>
</li>
<li class="work item" data-id="id-3" data-type="web" data-title="Web" data-project="Site Rebrand" data-year="2011 Project">
<img src="/css/img/product/work-demo2.png" alt="Description"/>
<a class="view" href="javascript:;"></a>
</li>
</ul>
<!-- I have 3 of the above columns, I would like the filter to act on all of them -->
<!-- I have only included 1 to keep it short -->
</div>
-
Ready: JSFiddle!!
- Update -
I decided to purchase and use the Isotope plugin in the end. The examples on the site are great, and I could achieve the effect I needed.
Very customizable and the perfect plugin for what I needed it for. (If your reading this, its probably what your after).
Check it out at: http://isotope.metafizzy.co/
STATUS: Here is an example of what you want using the live demo below: jsFiddle
I highly recommend this tutorial with live demo that shows an excellent method to use the Quicksand plugin. The comments show below include a couple of tips by me explaining how to have clickable links in the navigation.
The markup is very similar yours except in addition to the Quicksand JavaScript file a separate asset file is required that configures Quicksand, which your jsFiddle is not using.
To be sure, this asset file is the Click Event handler that activates the Quicksand filtering based on your markup layout. For example this jsFiddle shows 1 of 5 ready to use examples from the Quicksand website that are linked in the Examples Section. The separate asset file I was referring to can be considered as the jQuery markup in the JavaScript window.
Also note that jQuery UI Library is required, and is loaded as an asset in the above jsFiddle.
I created a Quicksand Demo with Shadowbox, a lightbox alternative, based on the original demo. It's on the Shadowbox Forum. If you need help with that, visit and post there and I'll be glad to help.
this error/bug is 'cause the plugin doesn't work with the latest verions of jQuery. You can solved it with using just old jQuery (1.7.2 i just tryed and it works).
please sorry my english...
I have a html template doing this.
<ul id="things">
<li data-foreach-thing="Thing.all" data-mixin="animation">
<a data-route="routes.things[thing].new" data-bind="thing.id"></a>
</li>
</ul>
The data-route attribute is returning a url like this:
http://localhost:3000/#!/things/new
I don't know why it is adding the #!
I'm using batman.js 0.9 with rails 3.1
Any help figuring this out is be appreciated, thanks.
Here's a good description of hash bang urls hash bang urls. This is normal for batman to do this (pretty much all javascript frameworks do this). You can enable "pushstate:true" which will disable it (however it will fall back to hash bang if you're on a legacy browser).
Regarding your batman.js view not being rendered, I ran into a similar issue. I didn't have an error in my chrome console, however the view wasn't being rendered. You need to make sure you have a data-yield attribute for your view to attach to.
For example:
<div id="container" data-yield="main">
</div>
Excerpt from batman.js github:
Now when you navigate to /#!/faq/what-is-art, the dispatcher runs this
faq action with {questionID: "what-is-art"}. It also makes an implicit
call to #render, which by default will look for a view at
/views/app/faq.html. The view is rendered within the main content
container of the page, which is designated by setting
data-yield="main" on some tag in the layout's HTML. You can prevent
this implicit rendering by calling #render false in your action.
Are you trying to show a link to the show action for the thing? It should look like this if you are:
<ul id="things">
<li data-foreach-thing="Thing.all" data-mixin="animation">
<a data-route="routes.things[thing]" data-bind="thing.id"></a>
</li>
</ul>
Here's an example of some code I'm using (the order of the data- attributes doesn't matter):
<div data-foreach-section="sections" data-mixin="animation">
<a data-bind="section.SectionId" data-route="routes.sections[section]"></a>
<p data-bind="section.Name"></p>
</div>