How can I go about actioning a FancyBox popup that notifies new users of a quick sign-up button (or whatever is chosen) like on Digg.com ... and as with Digg just one time. I really have no experience with cookies but already have FancyBox running in other parts of the website, so the basis is already there. I require the popup to appear on page load. Any pointers very happily received!
My eventual solution uses the Reveal Modal plugin (click here) to trigger inline to 'fire' on page load using the modified following code for the popup to be displayed only once every three days. Remember also to load jquery.cookie.js and then add the following code:
<script type="text/javascript">
jQuery(document).ready(function(){
if (jQuery.cookie('test_status') != '1') {
jQuery('#myModal').reveal()
jQuery('#myModal').trigger('click');
jQuery.cookie('test_status', '1', { expires: 3}); }
});
</script>
Using something other than FancyBox was the answer to the original question as it seemed there was a conflict somewhere, so using Reveal made the two functions completely separate. I should also note that the .css contents from the Reveal download were added to our site's stylesheet.
Hopefully that will help someone else out.
You can find a code example here https://stackoverflow.com/a/8305703/1055987 including the link to the jQuery Cookie plugin.
Related
i've been using datepicker in many of my projects, but this one project, i've got a problem with it.
the prev/next buttons don't act like it suppose to do. when i clicked it, it redirects to the default page. for example, here is the url where i implemented datepicker
$('input#_date').datepicker();
project.dev/index.html?q=123a21#/home
then, when i click prev/next button, it redirects me to default page which is
project.dev/
i have no idea why this one acts like this. has anyone any idea on how to fix this?
EDITED:
i found out source of the problem but still can't figure out a way to solve it.
everytime i clicked next/prev button on datepicker, it always redirects to default router which is $.sammy.get(''). i found out that prev/next button on datepicker is actually an <a> tag without href attribute.
i managed to solve it eventhough (i still have no idea why it happens) by preventing the default event.
$('input#_date).datepicker({
//options
}).focus(function() {
$('.ui-datepicker-next, .ui-datepicker-prev').on('click', function(e) {
e.preventDefault();
});
});
I'm using Foundation 6's "Reveal" to create modals. When I use a reveal trigger on a link that has a href, the modal pops up but then the page goes to the link as well. I only want it to go to the link if there is no JS, it's also for SEO.
I've checked the Reveal (http://foundation.zurb.com/sites/docs/reveal.html) and Foundation's javascript utilities (http://foundation.zurb.com/sites/docs/javascript-utilities.html) without any luck.
Try something like the following.
$('[data-open]').on('click', function(e) {
e.preventDefault();
});
I have two files in my project
index.html : contains 'app-container' where reactjs components mount
app.js : the file which has the react components
I want to use the facebook like and share button in my reactjs app. But I want them to appear only at certain points of time.
That is, I want to display them from reactjs's render() function, not permanently on my html page.
I proceeded the following way -
1.) I added the link to facebook javascript SDK on my index.html page.
2.) I added the code-plugin for like/share button in my render method.
<div class="fb-share-button" data-href="http://localhost:3000/game" id = "fbshare" data-layout="button_count"></div>
But the problem is that even though the components mount properly, like/share button are not visible.
Can anyone point out how I should proceed ?
Since class is a reserved word, React uses className. The below should solve your problem
<div className="fb-share-button" data-href="http://localhost:3000/game" id="fbshare" data-layout="button_count"></div>
The problem is that it won't complain if you type class="", or anything else for that matter, like xlink:href="" or other unsupported attribute names. It will simply leave it out, and your share button won't get it's style, thus probably leaving it invisible on the page.
If you want to use unsupported attribute names, dangerouslySetInnerHTML is the way to go.
render: function() {
var html = '<div class="fb-share-button" data-href="http://localhost:3000/game" id="fbshare" data-layout="button_count"></div>';
return (
< div dangerouslySetInnerHTML = {{__html: html}} />
);
}
If it still isn't working, it's probably because you are rendering the button after Facebook has finished parsing the page. In that case, you can use FB.XFBML.parse() in componentDidMount().
I have a page that includes a CFDiv tag that displays content from another file.
<cfajaximport tags="cfwindow,cfform,cflayout-tab,cfdiv">
<cfoutput><cfdiv class="vehicle-log" bind="url:trip_tab.cfm?ticketid=#ticketnum#" ID="theDiv" bindOnLoad = "true"/></cfoutput>
The external file has jquery tabs and jquery datepicker. None of the jquery seems to work in the CFDiv. If I call the external page by itself, everything works fine.
The reason I'm using a CFDiv here (I know most people hate cf layout stuff) is because the external page has a form element that I can submit and add to data to the db without refreshing the whole parent page. This is the only way I know how to do this.
Anyways, does anyone know how to get my jquery elements to work in a CFDiv?
Thanks.
Brian
You've got more than one problem here. First, you are using <CFDiv>, which under the covers is using portions of a very old version of ExtJS. So you are likely going to run into some headaches with mixing ExtJS and jQuery (and jQuery plugins).
Second, since <CFDiv bind="..."> uses AJAX to load the external HTML window content, you would need to change your JavaScript strategy. <CFDiv> will not pull in and execute the JavaScript code (including jQuery) from the external page (trip_tab.cfm), unless you only use CF UI widgets inside that external page (then the <cfajaximport> tag handles that for you). It only loads the HTML DOM content. You will have to move any <script> and <link rel="stylesheet"> tags and custom JavaScript/jQuery code and CSS into the parent page (the page that has the <CFDiv> tag in it). Then you'll have to find a way to listen for the AJAX event (completion of loading the external page) and call the custom JavaScript/jQuery code.
As others suggested in the comments above, using <CFDiv> is only making things harder for you. If you switched to using one JavaScript library for your UI components (like jQuery/jQueryUI/jQuery plugins), and put all of the necessary code into your main page, what you desire can be accomplished fairly easily.
I found a simple work around... CFdiv creates what feels like a seperate browser window, but its not actually one. So it can't pull Javascript files in via:
<script type="text/javascript" src="/js/scripts/jquery-1.11.1.min.js"></script>
The above is telling the browser "go fetch this file" - but since your CFdiv is not really a browser (Its a controversial permutation of CFajax as described here) it doesn't do it.
Technically, the above makes the browser include it into the page, just as if you cfincluded it , or just pasted the Javascript in there.
So convert the above to:
<script type="text/javascript"><cfinclude template="/js/scripts/jquery-1.11.1.min.js"></script>
And included javascript will work! (provided there aren't any conflicts with cfajax et al)
I had a similar problem in that my jquery was not working, and doing this fixed it.
There are several extensive code examples on a tutorial page at the ember web site that are all failing in a specific way. As this is supposed to be archetypal ember code ostensibly to direct newcomers how to code in ember, I am at a loss. Could someone who knows ember have a look at the code. (An example is directly above that bookmark I listed, and includes both the templates and js.
Specifically what's happening is that the main root page template has an outlet 'footer' that's only written to by the subpages, but when you navigate back to the home (root/index) page, that outlet still has the info from the subpages showing, which it shouldn't. The same thing is happening with the template called 'traversal' whose outlet is only written to by the subpages, but that outlet is also still showing info in it when you navigate back to the root.
I did run across a function disconnectOutlet in the API docs, but it says you shouldn't hardly ever have to use it, and its not in the example code. I tried it - evidently not actually in the api anymore.
If you want to run that code above you'll need the following from the ember site:
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/jquery-1.7.2.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.pre.min.js"></script>
As you mentioned, disconnectOutlet was added by this pull request. You can use it to remove an outletView (by name) from a controller. For example, remove myOutletViewName from applicationController when exiting a certain route:
aRoute: Ember.Route.extend({
exit: function(router) {
router.applicationController.disconnectOutlet('myOutletViewName')
}
})
Note that if you use {{outlet}} in your template, without specifying a name, the default name is view so you do:
router.applicationController.disconnectOutlet('view')