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/
Related
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
When I run it locally, it works fine! But it isn't working when I upload it to my host and try it out online.
here's the code I'm using:
<div class="group">
<div class="left">
<img src="img/up.png" onmouseover="this.src='img/upscroll.png'" onmouseout="this.src='img/up.png'"alt="" />
</div>
<div class="middle">
<img src="img/hobo.png" onmouseover="this.src='img/hoboscroll.png'" onmouseout="this.src='img/hobo.png'"alt="" />
</div>
<div class="right">
<img src="img/blamealcohol.png" onmouseover="this.src='img/blamealcoholscroll.png'" onmouseout="this.src='img/blamealcohol.png'"alt="" />
</div>
Ok, editing answer with a different solution altogether.
Maybe this would do what you are looking for but be a little more simple than the mouseover events.
Here's the demo http://jsfiddle.net/xxhpxd98/
<img class="clock" src="http://images.cdbaby.name/6/0/60x60music2_small.jpg" height="60px" width="60px">
<img class="briefcase" src="http://www.globetrotter1897.com/wp-content/uploads/2013/06/Burgundy-Flight-Bag-and-Small-Brief-60x60.jpg">
.clock {
position:absolute;
z-index:2;
}
.clock:hover {
opacity:0
}
.briefcase {
position:absolute;
}
If the path of the hover image is correct then the problem is something else.
Usually when a page is loaded it loads everything which is present in it in the first view. i.e it will not load any images which is put in the javascript events such as onmouseover. And the mouseover image starts loading only when you do the action (i.e mouseover). And sometime it may fail if the hover image is not cached or if the image couldn't be fetched from server.
There are different ways to solve this problem.
Here are two:
1) First method:You should preload the hover image using javascript
var image1=new Image();
image1.src="img/upscroll.png";
by this method the image upscroll.png will get cached and thus your code works fine.
2) Second method:Include all the hover images in the page and set its width and height to 1 px so that no one will see it but the image will be preloaded. If required you can change the position of these dots to fixed and keep it out of the screen at left:-10px or something like that.
This not only makes the code work fine but also it will avoid the weird appearance of the image getting loaded while mouse is over as it is already cached.
I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!
In the _Layout.cshtml, I have a heading image and two link images that change into other images when the cursor hovers over them. When the page is loaded initially (e.g. //localhost:58055/), the images are shown. When I redirect through the links so that the URL is //localhost:58055/Home/Index, for instance, the images only show the little "broken image" icon. Why might this be? Here is where I specify the header's image in _Layout.cshtml.
<header>
<div class="trippy-title">
<img src="images/title_wider.jpg" width="100%" height="100%" repeat>
</div>
</header>
I recommend you read this article for a better understanding of locations in ASP.net.
http://www.west-wind.com/weblog/posts/2009/Dec/21/Making-Sense-of-ASPNET-Paths
as a simple solution you can use ~/images/title_wider.jpg this works with Razor 2+
I want to know how I can link to a video using a thumb of a image from one page to another.
For instance if I wanted to link to the page only from one page to another I would simply put
<img src="theotherpage.html" />
But that doesnt quite do the job for me. I need to link to the video directly.
How can I do that?
Just wrap the image with <a> tag
<a href="link-to-direct-video">
<img src="image-thumb-src" />
</a>
If I understand your question correctly.
If you want to link to a page with one video, use YardenST's answer. If you want to link to a page with many videos, but you want to scroll to that video you can use an anchor.
On the videos page, say you have the following HTML:
<div id="video1"> ... </div>
<div id="video2"> ... </div>
If you wanted to link to the second video, you could use
<a href="/videos.html#video2">
<img src="image-thumb" />
</a>