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();
});
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 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().
At the moment i'm building a website in sharepoint, but everytime i open the main page of the website in my browser the control panel on the left upperside of the screen is missing. I have no idea why?
To clarify: In this tutorial you can see the browse/page/site control screen, in which they make nearly all the simple changes to the website. https://www.youtube.com/watch?v=dJlwCNXMCBo (edit: Forgot the link of the tutorial)
I literally have no idea why i cant use this, does anyone have any clue?
Edit: My mainpage looks like this:
http://s30.postimg.org/6a5mkzoip/Screenshot_main_page.png
Pull down the menu with the gear icon beside your name. Click on "Show Ribbon".
Your master page is hiding it through javascript.
<script type="text/javascript">
var suitebar = $("#suiteBar");
if(suitebar.length<1)
$("#s4-ribbonrow").css('display','none');
</script>
If you change the master page to $("#s4-ribbonrow").css('display','block');
You should see the ribbon.
I am trying to install firebug lite onto IE and Chrome. The documentation states to simply add the javascript location in the document and all should be well. This works but the iframe containing then firebug is hidden with a visibility: hidden attribute. I am unable to find anywhere to actually activate the firebug, normally you would think you could right click and "inspect" but that option is not there. The chrome extension and bookmarklet works but my main concern is trying to firebug through internet explorer.
Anyone had or solved this issue?
Yeah I had the same problem using the stable channel. I switched to the debug channel & it worked perfectly, opening right up. So use this:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
Also, I find it useful to throw a quick 300px-high div in there at the bottom of my page to make room for Firebug Lite, like this:
<div style="display:block; height:300px; background:blue;"></div>
Just don't forget to remove it with the FBL script tag!
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.