Following the docs, I am trying to get Reveal to work. Its a pretty vanilla installation. I am loading Foundation and jQuery via jsdelivr. I can see the div I am trying to load into the modal, but it doesn't get loaded.
In order for Zurb Reveal to function properly, the javascripts must be loaded after the modal elements.
click here
<div id="myModal" class="reveal-modal" data-reveal>modal content</div>
<script src="jquery.js"></script>
<script src="foundation.min.js"></script>
If the <div id="myModal"> is placed after the foundation script tag, it won't work.
Related
For the longest time, the Foundation Sticky plugin was working as expected, sticking as the page scroll met the top of the sidebar. Now, suddenly, it's broken:
https://www.arcresources.com/about-arc/board-of-directors/member-bios
It jumps once, and the classes are changed, indicating the plugin is firing and adding the top margin, but after that, nothing.
I've tried commenting out all other JS, and relevant CSS to see if something was interfering, but the same problem persists.
Adding width: 100% and position: fixed to the data-sticky div produces the right results, but this is the code the Sticky plugin should be adding and removing based on my top and bottom anchors.
Sidebar code:
<div class="grid-container sidebar-nav-wrapper {{ firstSegment }}">
<div class="grid-x grid-margin-x">
<nav data-sticky-container class="show-for-large large-3 large-offset-9 cell sidebar-nav">
<div data-sticky data-top-anchor="main" data-btm-anchor="main:bottom" data-sticky-on="large" data-margin-top="6">
<!-- Sidebar content -->
</div>
</nav>
</div>
</div>
I'm using Zurb Foundation 5.5.3 in an Angular JS project, and trying to execute a reveal modal. I look for this problem on community, but no solution has been successful, as I don't forget data-reveal property or I don't want to invoke JS via.
This is my code:
<div class="small-1 columns">
Click Me For A Modal
</div>
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
It's the same as code example in Foundation docs. When I click on link, modal does not appear, and page is redirect to home.
Any idea?
Thanks in advance!
You reference a similar question here:
Foundation and AngularJS
There are conflicts in the JavaScript digest cycle when using Foundation 5 and AngularJS, so they won't work together by default.
I've used two different solutions successfully:
Foundation for Apps
Angular Foundation
I prefer using the latter.
I've created a completely custom homepage in Sharepoint 2013 and it works fine (using custom HTML, CSS, JS, and Jquery Lib). I just need to know how to add the Sharepoint Suitebar to the top of the custom page.
I'm not using any type of Sharepoint template or master page template. I built my page like you would any other web page and uploaded my files into a directory within Sharepoint and then uploaded my custom page to the Site Pages directory and set it as home.aspx, which automatically makes it my homepage. Building a completely custom page like this is great, but I loose some built in features and components Sharepoint offers which I would like to use, the Suitebar being one of them.
My example HTML template here does not represent my actual custom homepage. I'm just linking this JSfiddle in hopes that someone will show me how/where to add in the Sharepoint Suitbar.
JSFiddle:
https://jsfiddle.net/x1vcdeLx/
<!DOCTYPE html>
<html>
<head>
<title>Sharepoint Custom Homepage</title>
<!-- Stylesheets -->
<link href="/sites/SiteAssets/css/reset.css">
<link href="/sites/SiteAssets/css/style.css">
</head>
<body>
<!-- BEGIN CREATIVE CONTENT -->
<div class="myContent">
<div class="row-1-of-3"></div>
<div class="row-2-of-3"></div>
<div class="row-3-of-3"></div>
</div>
<!-- END CREATIVE CONTENT -->
<!-- Scripts -->
<script src="/sites/SiteAssets/js/jquery-2.1.4.min.js"></script>
<script src="/sites/SiteAssets/js/jquery-easing-1.3.min.js"></script>
<script src="/sites/SiteAssets/js/script.js"></script>
</body>
</html>
You can go and download the Sharepoint master page then search for the controls which are used for that suite bar. Put those controls in your page and it may display properly.
To get the name of the portion of the suite bar see image below
I am using Emberjs and Gridsterjs to create some kind of editor. I found out that you need to make a component to include a jQuery plugin in Emberjs. Inside that component i have a number of components that will become the widgets for the Gridster.
this is how i've setup my templates:
<script type="text/x-handlebars">
{{#create-gridster}}
{{create-widget}}
{{/create-gridster}}
</script>
<script type="text/x-handlebars" data-template-name="components/create-gridster">
<button class="btn" {{action 'newWidget'}}>add widget.</button>
<section class="gridster-wrapper">
<div class="gridster">
<ul id="gridster-list">
{{yield}}
</ul>
</div>
</section>
</script>
Now i've created a button that allows the user to add a widget to the Gridster, but i can't seen to find a way to give the requested HTML string for the widget from the component.
I've tried this:
this.get('gridster').add_widget(Ember.Handlebars.compile('{{create-widget}}'));
and this:
this.get('gridster').add_widget(App.CreateWidgetComponent.create().createElement());
but that doesn't seen to work.
QUESTION
My question is how do i create the html string that gridster expects and keep the ember functionality for editting the content.
In myprettycms (myprettycms.codeplex.com) I use gridster to create layout, then to edit the content of the gridster li, I superpose a tiny mce on the slot and I transfert the content of the slot to tinyMCE instance.
When it's finish, I transfert TinyMCEContent in the slot.
See : http://myprettycms.codeplex.com/SourceControl/latest#MyPrettyCMSCommunityManager/Portals/MVC4Portal/Scripts/Views/DynaContentAdmin.js
I'm using a VS2010+MVC3(Razor)+IE8+JQueryUI stack and I was trying to create a list of buttons using the jqueryui .buttons() function. However, for some unknown reason it would consistently crash Dev-Webserver+IE8 when the button was pressed. The code below is necessary and sufficient to demonstrate the bug. Simply cut and paste it into your Home/Index.chtml file and run.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
<ul>
<li>
<div>
<label for="aa">text</label>
<input type="checkbox" id="aa" class="theclass"/>
</div>
</li>
</ul>
<script type="text/javascript">
$(function () {
$(".theclass").button();
});
</script>
This works fine with Chrome, and the error also does not occur if you drop this into a plain HTML file and ran outside of VS2010, so this may be something specific to MVC/ASP. Removing the surrounding div will stop this from crashing. Notably, this only crashes when the button is the last button in the div group. As a hack I added an empty div after the input element, and this stopped it from crashing. This was a very idiosyncratic error and so I'm posting this here in case someone has similar troubles.
Cheers
Rob
IE8 has a whole bunch of bugs. Best suggestion is to take a look at this list of IE8 bugs. I use this list whenever I find an IE8 bug.
http://jhop.me/ie8-bugs
The closest thing I can find on that page would be the following javascript bug.
Utilising querySelectorAll within a statement that breaks out of a for loop, triggers a full program crash.
It's possible the jQuery method is causing that or the button method is causing that. Why are you trying to make a checkbox into a button? I don't think the button method is supposed to work like that.
This happened to me as well, but not in VS2010 and not with MVC, it's just something that seems to happen with the jQueryUI button...
My solution was simple, wrap the offending elements in a SPAN tag. In the above example, this should fix the issue...
<span class="theclass"><input type="checkbox" id="aa"></span>