Quick question:
Can I enable website preview on all of the links in my web page?
i.e. when the user moves the mouse over any link in the page, I want to show a simple popup window which loads the page in link.
If it's important, I'm using Asp.net
You can use an iframe tag to display another page.
<iframe src="http://www.example.com"></iframe>
Your HTML
<a class="tiptext">A link
<iframe class="description" src="http://www.example.com"></iframe>
</a>
Your CSS
.tiptext {
color:#069;
cursor:pointer;
}
.description {
display:none;
position:absolute;
border:1px solid #000;
width:400px;
height:400px;
}
Your JS
$(".tiptext").mouseover(function() {
$(this).children(".description").show();
}).mouseout(function() {
$(this).children(".description").hide();
});
JSFiddle: http://jsfiddle.net/yboss/q29tP/
Related
How can I embed my company's live public webpage to my company's intranet site I am redesigning now, as I click a link in intranet? I am using iframe. The company public domain is in WordPress.
I came across these links, but none could help me:
- How do you put only a certain section of a website into an iframe?
- Loading wordpress page content in colorbox Iframe
My HTML
<div class="menuItem">
<b>Events</b>
</div><br><br>
<div class="menuItem">
<b>News</b>
</div><br><br>
<iframe src="" frameborder="0" name="displayBox" width="100%" height="400px"> </iframe>
My CSS
.menuItem
{
float: left;
margin-top: 5%;
width: 120px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bolder;
transition-property: width;
}
.menuItem:hover
{
color: #CB4154;
transform: scale(1.2);
}
.leftSec .menuItem
{
font-size:18px;
}
There is an option in Wordpress to disable frame or iframe displaying your website content under the WP Security -> Miscellaneous -> Frames Tab.
In which you get an option to Enable iFrame Protection.
If the checkbox is clicked you won't be able to display the content directly to your iFrame. If unchecked the other site's iFrame would be able to display your webpage.
:)
I have been searching the web but can't find the answer. Is it possible to overlay or embed a bootstrap button over/in an image? If so, how?
I have a image that I want to overlay a bootstrap button over so it looks like it is embedded in the image. I would like the button to have a dynamic label on it(for ex. somebody's name).
Stano answered the question for me!
"...yes the button can be positioned above the image tag, for example like this: http://jsfiddle.net/ubWuX"
HTML:
<div id="img_container">
<img src="http://jsfiddle.net/img/initializing.png"/>
<button class="button"> click here </button>
</div>
CSS:
#img_container {
position:relative;
display:inline-block;
text-align:center;
border:1px solid red;
}
.button {
position:absolute;
bottom:10px;
right:10px;
width:100px;
height:30px;
}
I'm relatively new to Web dev. The question is generic, but I'll pose specific user-cases.
Use-case 1:
I have a div element on a web page. When the page loads the first time, this div runs a small 5 sec animation. What I wish to do is, when this animation ends, I want the same div to contain some other element - it could be an image, a link, another animation etc.
That is, one container - the div - hosting multiple elements on a time-scale. First 5 secs animation , followed by an image or a link.
What Javascript methods will allow me to do so?
Use-case 2:
Again, I have a div element in a page. Now this div element is like a tabbed browser - you click on a different tab to view a different web page. Similarly, I wish to make this a "tabbed" div. As in, when the user hovers the mouse on tab 1, the div would show a video, when hovered over tab 2, it would show another video in the same div - that is, replacing the old video. The tabs can be considered as a fancy looking link.
Or, in the first place, is there an alternative to 'div' to do the things mentioned above?
Thanks,
SMK.
Solution for use case 2 -
This is a slightly lengthy solution but its extremely flexible and can be scaled up to any number of tabs very easily
We will divide the solution into 3 parts - The CSS, HTML and JQuery.
Lets take a look at the CSS part first
<style>
#tab_holder {
width: 350px; !important
}
#tab_holder .tabs {
float: left;
height: 20px;
padding: 5px;
border: 1px solid #eee;
border-bottom: none;
width: 50px;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
#tab_holder .tabs:hover {
background-color: #eee;
}
#tab_holder #content_holder {
width: 400px; !important
margin: 0 0 0 0;
border: 1px solid #000;
padding: 10px;
float: left;
border-radius: 0 5px 5px 5px;
}
.content {
visibility: hidden;
}
</style>
Let us now take a look at the HTML part of this solution
<div id="tab_holder">
<div id="tab1" class="tabs">Video1</div>
<div id="tab2" class="tabs">Video2</div>
<div id="tab3" class="tabs">Video3</div>
<div id="content_holder">
<div id="main_content">Select a tab to see the video..</div>
</div>
</div>
<!-- These are divs in which you put your actual content.
They are always hidden -->
<div id="content1" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/4Z6YUGGlwtA?rel=0" frameborder="0" allowfullscreen></iframe>
< /div>
<div id="content2" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/s13dLaTIHSg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="content3" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/I1qHVVbYG8Y?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
You can see that each tab is represented by a div which is using the "tabs" class from the CSS section. If you need to add a new tab, all you have to do is add a new div and give is a new id. For example to add a forth tab, you can say -
<div id="tab4" class="tabs">Video4</div>
It is as simple as that.
Now the thing I like about this approach is that you can place the content to be displayed also in div's, rather that nesting it under jquery. In this case we use the div's with the id content1 content2 content3
This gives you the flexibility to expand as you enter content into the div and use normal markup without getting confused and at ease.
These div's are not visible as we have set their visibility to hidden is CSS.
If you add a new tab div you must also add a new content div.
Now we move onto the JQuery part -
$(document).ready(function (){
/* Add the listeners. */
$("#tab1").mouseover(function (){
switch_content('content1')
});
$("#tab2").mouseover(function (){
switch_content('content2')
});
$("#tab3").mouseover(function (){
switch_content('content3')
});
});
function switch_content(name){
$("#main_content").fadeOut('fast',function (){
$("#main_content").html($("#"+name).html());
$("#main_content").fadeIn('fast');
});
}
The above JQuery function is extremely straight forward. Each tab is attached a action listener which is fired by a mousover event. So if you add another tab with the id=tab4 and its respective content div with the id=content4 then all you have to add in the jQuery is:
$("#tab4").mouseover(function (){
switch_content('content4')
});
So it becomes very easy to expand the code.
You can find a working demo of this on my website demo section
Tips -
Avoid using hover because it creates an annoying user experience due to accidental hovers and it is hard for mobile platforms to emulate this event. Most of them fall back to click. So I suggest use the click event instead.
If you must use, make use of the HTML video tag and pause the video using JS if the user hovers on another tab. This will render a better user experience.
Here is an example for use-case 1.
In your html you need to include the 5 second animation, i persume this is a gif? Although it can be any content. For the sake of this example i will show it as a div.
The html i have used:
<div id="example">
<div id="somecontent"> </div>
<div id="morecontent"> </div>
</div>
The CSS:
#example
{
width:500px;
height:500px;
background-color:#f00;
padding:10px;
}
#somecontent
{
width:200px;
height:200px;
background-color:#fff;
}
#morecontent
{
width:200px;
display:none;
height:200px;
background-color:#000;
}
and the javascript(using jQuery):
setTimeout(function() {
$("#somecontent").fadeOut("slow", function() {
$("#morecontent").fadeIn("slow");
});
}, 5000);
Have a look at this jsfiddle for it in action - http://jsfiddle.net/fntWZ/
For use case 2 it will be more complicated. Try having a look for some different plugins that could help with this
answer for use-case:1
css :
<style>
#myDiv {
height:0;
width:0;
position:absolute;
border:1px solid red;
}
</style>
script :
$(document).ready(function(){
$("#myDiv").animate({width:"100px", height:"100px"},5000, function(){
var image = new Image();
image.src = "dropdownContainerBottomMiddle.png"; //your image src goes here
$("#myDiv").append(image);
//you can append more content by using setTimeout function
setTimeout(function(){
var anc = "stackoverflow";
$("#myDiv").append(anc);
}, 1000);
});
});
html:
<div id="myDiv"></div>
how do you set up a link/image so when you hover an image, a link on the page turns to the hover state and vice versa?
Similar to what this site has:
http://www.adrianlawrence.co.nz/
Any help would be great!
Thanks!
You can attach an event listener to one (image or link) to listen for mouseover. Have that fire a function which will find the element of the matching ID (image and link matching, ie image id = "image1", link id = "link1") and change the CSS.
Pure CSS and HTML can definitely be used to create an effect similar to the website you linked to.
Check out this fiddle.
Place both your link text and your image within one a element.
Give each of your images a distinct ID.
Use CSS to position your image absolutely (or relatively, your call) at the desired location.
The HTML:
<a href="www.google.com">
Hello there.
<img id="img1" src="[SOURCE]" alt="Be Happy!" />
</a>
The CSS:
/* The Important Stuff */
#img1 {
position:absolute;
bottom:20px;
right:45px;
}
a:hover {
text-decoration:none;
}
a:hover img {
opacity:.8;
}
/* The Unimportant Stuff */
body {
background-color:black;
}
a {
color:white;
}
Please can anyone help me to put something over the iframe like div or canvas, my case is i have iframe from Photosynth.net, and i need to put like character over this iframe ??
and i use the z-index but still it's not working.
I have created a simple sample showing how to use CSS to position content over top of an iframe. It's just simple CSS layering:
<iframe src="http://phrogz.net/"></iframe>
<div id="over">HI MOM</div>
And then in your stylesheet:
iframe { width:100%; height:300px; border:3px groove #f00 }
#over { font-size:5em; position:absolute; top:20px; left:20px; z-index:2 }