I have deployed my first page in Sitecore. But it is not rendered perfectly in Content editor preview mode.
Original html:
There is a nav menu and a banner below it. Behind them is a white transparent overlay & behind the overlay is a graffiti background image.
View from Experience editor:
The settings icon went offset. The white overlay is now above the Sitecore menu preventing the edits.
Error in browser console:
Uncaught TypeError: element.dispatchEvent is
not a function - prototype.js:5734
Uncaught TypeError:
element.attachEvent is not a function - prototype.js:5653
View in Content Editor:
It is rendered as if for a tablet, as you see the menu got shifted to the icon. I understand, it is because of the dimensions of the preview panel.
But, if this is the case, how will an author be able to edit/view the correct design.
Prototype.js is not a file being used by the site. So, it must be from Sitecore's.
Im guessing , certain CSS props, aren't being respected (Like position, transformnation).
Is this a bug. How to fix this. I have checked in different browsers (IE, chrome & firefox). It's the same
It looks like you are running into a conflict with prototype.js. Sitecore uses this in the experience editor.
If you are using jQuery in your site, there is a kb article about that here: https://kb.sitecore.net/articles/286042
To fix the issue, you need to run jQuery in no conflict mode. There are a few ways of doing that. Here is a simple example:
<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( "div" ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
var mainDiv = $( "main" );
}
</script>
You can find more on the jQuery website: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
You also need to be careful with your CSS - don't absolutely position elements to the top of your browser, always make sure they are relative to a container so that the Sitecore EE DOM elements can be added and positioned correctly.
Related
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'm wondering how can I make a menu like in this website with Ember ?
The page is split in different sections and we can scroll to go to each section, a click on the menu make the page scroll to the wanted section.
I'm not sure if I should have different routes in the router for this behavior, I would guess it's not the case as when we change route the view is remove from the DOM.
Then, how should I build the anchor link to each section ?
The best solution will automatically updates route when we scroll the page but any solution to handle the link and URL recognition will be fine.
Some may argue otherwise, but Ember may be a little overkill for a website landing page like you've shown. Ember is meant more for robust web apps that have multiple views and data they need to be connected with.
First off, if you look at their script, they're using jQuery to animate the body's scrollTop position to the respective div and setting window.location.hash to the hash of the menu element's href which also happens to be the ID of the <section/> the body scrolls to:
$(document).on('click', '#nav a, .clients-capabilities a', function(){
var target = $(this);
var hash = this.hash;
var destination = $(hash).offset().top;
stopAnimatedScroll();
$('#nav li').removeClass('on');
target.parent().addClass('on');
$('html, body').stop().animate({
scrollTop: destination
}, 400, function() { window.location.hash = hash; });
return false;
});
Secondly, they are not doing anything special to load to a specific position on page load. If you load any page on the web with a hash, the browser will look for an element with that ID and load at that position. For example, http://emberjs.com/#download.
Even if you still want to use Ember for this, you'd probably end up doing something similar with a single view loaded from the / route so I wouldn't even worry about Ember until your site becomes a full fledged web app.
Try using a *: catch all pattern in the router on the page you want to handle this scenario.
so lets say that index will work as a single page that you have to be able to automatically scroll to certain elements from the url.
Also you have posts and about sub pages that you can go to from the index page via links.
then...
App.Router.map(function() {
this.route('about');
this.route('posts');
this.route('index',{path:'*:'});
});
so if you have an element with id="elementToScrollTo" then the url /#elementToScrollTo would load the index page and scroll to that element.
See How to handle 'no route matched' in Ember.js and show 404 page? also for some other ways to solve this.
I hope this helps you.
I am loading a page (item rendering e.g. /sitecore/content/.../Page) inside an IFrame. It shows the Page Editor ribbon as well. I want to hide that tool bar, it is not required in my scenario.
But if I set the source URL for IFrame like http://mysite/somefolder/page.aspx it does not display the Page Editor controls.
That means Page Editor controls gets loaded on demand.
Need to know how to stop loading Page Editor controls on the page.
Please let me know if you know how to stop those controls being loaded to the page.
This is because the page is in Edit mode. Will this page never need to loaded in the page editor? If not then you can add the following to the Page_Load event:
Sitecore.Context.Site.SetDisplayMode(Sitecore.Sites.DisplayMode.Normal, Sitecore.Sites.DisplayModeDuration.ResetAfterRequest);
Otherwise you can append ?sc_mode=normal to the URL when setting the src of the iFrame to achieve the same thing. This way if you want to edit the page outside the iFrame you can use the standard Sitecore Page Editor features.
What were/are you setting the URL of the IFrame to currently (when you get the controls)?
I found a solution, I am hiding this ribbon with CSS, it's a very simple solution,
<style>
/*Hide the edit mode ribbon panel appears in the iframes. Originally added this to Price strategy control.*/
#scWebEditRibbon, #scCrossPiece
{
display: none;
}
</style>
I have added on my web-sire some social buttons. Tweet share button works just fine but I have some issues with facebook and google+ button.
In fact I added this away the buttons : (the buttons are supposed to link to a web page through a parameter $URL
<div class="g-plusone" data-size="medium" href="{$URL}"></div>
and for facebook
<iframe src="http://www.facebook.com/plugins/like.php?href={$URL}&layout=button_count&show_faces=false&width=90&action=like&font=verdana&colorscheme=light" allowtransparency="true" style="border: medium none; overflow: hidden; width: 90px; height: 21px;" frameborder="0" scrolling="no"></iframe>
In fact I used iframe because my buttons are wrapped by divs that displays them in grey and color them the expected way on hovering.
The problem I have is that when clicking on the g+ no box appears, and when I click again, the g+ button displays a red triangle instead and I have a "+1 button errors" message : but I am in none of the case that would explain this kind of message.
When clicking on the facebook-like, I have nothing displayed on my facebook's wall...
Does anybody has an idea how to fix it ?
For the +1 button, I have a few things you can try. Is the actual button itself rendering also or are you getting unexpected behavior when you click it?
If the button isn't rendering, you might be missing the JavaScript library for Google+. The following code should be added to your post before the actual button gets rendered:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
If you are getting unexpected behavior when the button is clicked, you probably are having an issue with the URL parameter. You might be able to get by without passing a URL because the +1 button defaults to the current page. The following example shows the simplest case of rendering the +1 button for the current page:
<g:plusone></g:plusone>
If that correctly renders, you are putting something bad into the URL parameter or have something wrong with the strings in your parameters. For example, check that the strings you're using don't have backticks in the starting or closing quotes as opposed to single quotes.
The +1 documentation will have any additional details that you will need for configuring and customizing the button and its parameters. You can find it here:
https://developers.google.com/+/plugins/+1button/