I have a SharePoint team site and I made some changes in master page as below:
Moved top menu links and search box below page heading
In place of top links I placed an image called image1 and in place of search box I placed another image called image2
Replacing SharePoint logo with my own logo and increasing its size
I did all this using DIV/CSS. Now I am no designer, not even close. So I had to do a lot of trial and error before every thing looked ok except this one issue which now I am facing and i.e. when you click on "new document" link which opens a dialog box where you can upload document, that window is also showing those logos (which I mentioned in point 2 above)
How can I get rid of that? I was thinking that if somehow I can find out if the dialog is open then I can hide those images using CSS/Jquery?
Here's partial code to given you and understanding where I have wrote code. My divs are named "mydiv" and "mydiv2" while rest of the code is SharePoint's default:
<div id="WebPartAdderUpdatePanelContainer">
<asp:UpdatePanel
ID="WebPartAdderUpdatePanel"
UpdateMode="Conditional"
ChildrenAsTriggers="false"
runat="server">
<ContentTemplate>
<WebPartPages:WebPartAdder ID="WebPartAdder" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="WebPartAdder" />
</Triggers>
</asp:UpdatePanel>
</div>
</SharePoint:AjaxDelta>
</div>
</div>
<div id="s4-workspace" class="ms-core-overlay">
<div id="mydiv" style="float:left;border:thin;border-style:none;width:210px;position:absolute; padding-top:20px;padding-bottom:0px;padding-left:200px;z-index:1;">
<img src="/images/image1.jpg" width="65%" height="65%"></div>
<div id="mydiv2" style="border: thin none currentColor; width: 250px; right:600px;position:absolute; padding-top:20px; padding-bottom:10px;float: right;z-index:1;">
<img src="/images/image2.jpg" width="800" height="56">
</div>
<div id="s4-bodyContainer">
<div id="s4-titlerow"
class="ms-dialogHidden s4-titlerowhidetitle">
<div id="titleAreaBox"
class="ms-noList ms-table ms-core-tableNoSpace">
<div id="titleAreaRow"
class="ms-tableRow">
Fixed by using CSS class ms-dialogHidden as mentioned here:
https://sharepoint.stackexchange.com/questions/200195/new-document-dialog-showing-master-page-header-images/200197#200197
Related
I'm having a little trouble with an image linked to a section of the page. This link works fine when input into the bar and loaded, it'll scroll down but once the base page is loaded, if i click the image with the link, it doesn't want to go down the page to the tabbed section in question.
https://www.bollostore.com/beolab-50
That is the base page i'm running it on whilst
https://www.bollostore.com/beolab-50#product.view.paybyfinance is the link to the 'pay by finance' tab lower down the page. It is this that works a-ok if i put it straight into the url bar. But when I click the finance banner in the short description, it doesn't trigger.
The original that i've used is:
<img class="aligncenter wp-image-1176 size-full" src="https://www.bollostore.com/media/tmp/catalog/product/c/l/click-to-calculate.jpg" alt="finance for your tv and audio" width="1000" height="auto" />
you need to put a name tag in a element like
<a class="data switch" tabindex="-1" data-toggle="switch" href="#product.view.paybyfinance" name="product.view.paybyfinance" id="tab-label-product.view.paybyfinance-title">
Pay by Finance </a>
Use Case: displaying info in a subset window of the SAME page the user is in. For example. I have a list on the left side. On the right side is details of a record based on what data point is clicked on the left. Currently I am trying to use an iframe tag. Both parent and target iframe are content from my single same domain/site i.e. there is no external sources I'm referencing.
I've had this iframe working in the past, then one day I went to check it out and it was not working as it should.
So the parent page has a list of students (in the left column).
The target iframe (right column) is supposed to show the students details one the students link is clicked in the parent page.
Instead what it's doing now, is opening a whole new tab in a separate window with the students details.
UPDATE: Jan16, 2018
So i tested it in four browsers. Only Safari apparently supports the inwindow target render. Chrome, Opera and Firefox all opened new tabs - not what i want. What gives? Here is the full html (I realized I should grab the source vs what my front end html looks like in Wordpress... sorry).
<p><iframe id="ifrm" src="http://example/wp-admin/admin.php?page=wpbc&wh_approved&wh_is_new=1&wh_booking_date=3&view_mode=vm_listing" width="100%" height="400">Your school has not setup a booking listings view. Please speak to your school or contact admin to have it set up.
</iframe></p>
<p>Welcome Instructor. This is your personal Dashboard.
<p><strong>School Name:</strong> School name <br />
<strong>Your ID:</strong> instructor3</p>
<hr />
<div class="fivecol-one"><strong>Student ID:</strong> user<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=453369" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> <strong>Student ID:</strong> jan17<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=45988" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> <strong>Student ID:</strong> user2<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=44499" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> <strong>Student ID:</strong> jstudent<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=464428" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> </p>
</div>
<div class="fivecol-four last">
<iframe id="myiframe" scrolling="yes" frameborder="1" src="http://example/frm_display/Instructor-dashboard-iframe/" height="500px" width="100%">
</div>
<div class="clear"></div>
So you can see that I have named my iframe id="myiframe" and my target="myiframe". I did notice that i had forgotten to close the iframe tag in the target, however, that did not seem to make a difference. I cleared my cache and refreshed my pages.
As mentioned it's working in Safari desktop only. HOWEVER, (and this is weird) in mobile, it's working in ALL browsers! (i removed my explicative..what was i thinking)
I don't know if this is applicable, but this site is hosted in Wordpress and using formidable forms. In particular the iframe is displaying what's called in formidable a 'view' i.e. a special page that shows data from formidable. It's not formally a 'page' in the Wordpress sense of the meaning. Hence I'm wondering if for some reason the iframe tag is getting confused. One suggestion was to use
in the header of the iframe page. And that's when i realized i can't apparently do that because as far as I know a formidable 'view' does not have a header?
HELP!!! please.
this is embarrassing.
I was simply missing a name attribute
name="myIframe"
wow... sorry for posting bone head move, but hope it can help someone.
i'm using bootstrap CSS for my application. I have asp:login control with "remember me" checkbox.
my problem is there is a space between checkbox and the word "remember me". i removed all checkbox css from my css files, but still couldn't fix the issue.
I tried this css code to remove the white space
.chkbox{margin-left:0px;padding-left:0px;white-space:nowrap;}
and this is my Login control
<div class="contact-address span3" style="/*width:250px;*/margin-top:15px;padding-left:5px;">
<h3 style="color:#1872AB;font-weight:normal;">LOGIN:</h3>
<div class="login">
<asp:Login ID="user_Login" runat="server" OnAuthenticate="user_Login_Authenticate" RememberMeText="Remember me" TitleText="" UserNameLabelText="Email:" PasswordLabelText="Password:" OnLoggedIn="SAP_Login_LoggedIn" >
<LoginButtonStyle CssClass="con-tbutton"/>
<CheckBoxStyle CssClass="chkbox"/>
</asp:Login>
<table style="width:100%;">
<tr><td style=""><label>Forgot your password</label></td></tr>
</table>
</div>
but still, it looks like the image below
any ideas?
I just quickly made a sample aspx page, and it works just fine:
This is unstyled. As you see, the checkbox aligns just fine. I don't see any bootstrap styling in your example, or classes for that matter. It might be the closing </div> tag you're missing... This is the best I can give you without a live html example from you on JS Bin or somewhere simlilar. Try what I suggested in my last comment.
This is classic iframe code. All I want is to show different things when you click different links.
I want to display different galleries in wordpress on a page with different links. I don't wanna code different html's for each of them
<iframe id="myIframe" src="about:blank" height="200" width="500"></iframe>
<br />
Blogger<br />
CNN<br />
Google<br />
What you're trying to do is show and hide specific parts of the page when clicking on a link. You don't need to use iframes for that. I think you'd better use hidden div's for this, or maybe even an ajax call to load the different galleries. I'll show you the hidden divs approach :
<div id="gallery1" class="gallery">
A whole lot of html that makes up the 1st gallery
</div>
<div id="gallery2" class="gallery" style="display:none">
A whole lot of html that makes up the 2nd gallery
</div>
<div id="gallery3" class="gallery" style="display:none">
A whole lot of html that makes up the 3nd gallery
</div>
Show gallery 1
Show gallery 2
Show gallery 3
$('a').click(function() {
$('.gallery').hide();
$('#' + $(this).data('gallery')).show();
});
Here's a js fiddle: http://jsfiddle.net/nV5vy/
So, I have this sharing buttons: http://myst.sandman.net/book (at the right, for twitter, facebook and mail) and they are wrapping. The code for the buttons looks like this:
<div class="buttonwrapper">
<img /> Share on Facebook
<img /> Share on Twitter
<img /> Share via email
</div>
But, as you can see (using a browser that supports corner-radius), the "Share via email" button wraps down to a new line, which is quite allright, but I think it looks wanky. Is there a way to make it have a rounded left side and have the upper right button have a rounded right side? I.e. how do you detect and assign styles to elements depending on wrapping?