I'm still new to web development (coming from desktop development) and my new boss already gave me a project.
I have to surround our company logo with images that link to other products of ours.
While I think I can surround the image with the logos, I want to add some text to the logos, to make it less confusing. I can imagine it to be quite... weird, for lack of a better word, if it's just a product's logo and nothing to tell the user what it is.
I have basic knowledge of PHP (I know how functions, constructors, classes, variables, etc. work, but have no real experience in it), but I don't know if this will help me in any way.
Here's an example of what I want to do (pseudo):
func onMouseOver(object m_obj)
m_obj.showCaption();
m_obj.border = new Border(Effects.Glow, Colors.Blue);
end
I have no better way of demonstrating it, so sorry if it seems somewhat confusing.
If you're a Firefox user, open a new tab and hover over one of those images, I'm trying to achieve something similar to that.
The code:
<head>
<title>NetWork Team Vorschau</title>
<link rel="stylesheet" type="text/css" href="index_style.css" >
</head>
<body>
<div class="container" >
<input class="sites_overview" type="image" src="http://www.sites-login.de/images/logo_sites.gif" value="Übersicht: Sites" /> <!-- I want this to show text when hovered over -->
<img class="nwt_img" src="http://www.nwt.de/images/networkteam.png" />
</div>
</body>
</html>
Cheers in advance for any and all helpful answers or pointers in the right direction!
Simply in CSS:
.one:hover::after {
content:"Text when hovered";
position:absolute;
left:0;
}
<div class="container">
<div class="one">
<input class="sites_overview" type="image" src="http://www.sites-login.de/images/logo_sites.gif" value="Übersicht: Sites" />
</div>
</div>
JDFiddle
EDIT: + one with glowing effect perhaps
JSFiddle
I think that you can put
<title>Your text</title>
inside <img> tag.
You need to use JavaScript method (onmouseover) or a jQuery method (.mouseover()). jQuery is the most used JavaScript Framework, check in the official page. JavaScript run in the client side, in the browser.
Regards
Related
I have coded a small Three.js animation that I put i following way in my HTML page :
<div id="mainWindow" class="popup_block">
<!-- Javascript for simulation -->
<script src="../temp/webgl-debug.js"></script>
<script src="../temp/three.min.js"></script>
<script src="../temp/Detector.js"></script>
<script src="../temp/TrackballControls.js"></script>
<script src="../temp/OrbitControls.js"></script>
<script src="../temp/dat.gui.js"></script>
<script src="./main_simulation.js"></script>
<br>
This is a test : I want to put text below the "div id="mainWindow", not above like here :<br>
How could I do that ???
</div>
where I handle the Three.js scene of "mainWindow" in main_simulation.js
Unfortunately, I can't get to put after </div> some text or other HTML elements : they are systematically put above the <div id="mainWindow">... </div> block
You can see this issue on the following link :
Can't put text below Three.js
Maybe this problem comes from the fact that I am loading JS scripts at the bottom of HTML page but I am not sure.
If I load JS scripts in <head> section, I can't make appear the Three.js scene.
Could anyone give me a trick to put text after the main div of Three.js ?
Regards
UPDATE 1 :
I have also tried with :
<div id="mainWindow" class="popup_block"></div>
<!-- Javascript for simulation -->
<script src="../temp/webgl-debug.js"></script>
<script src="../temp/three.min.js"></script>
<script src="../temp/Detector.js"></script>
<script src="../temp/TrackballControls.js"></script>
<script src="../temp/OrbitControls.js"></script>
<script src="../temp/dat.gui.js"></script>
<script src="./main_simulation.js"></script>
<br>
This is a test : I want to put text below the "div id="mainWindow", not above like here :<br>
How could I do that ???
But the problem is still present
UPDATE 2 :
Here's an illustration of my issue :
In HTML source, the text is located below the three.js div, but the rendering makes put it above.
UPDATE 3 :
First of all, its not really a matter of three.js, but there is still an important issue to address.
Whatever functions You have, either plain image positioning, or three.js placing the renderer in a div, It's easy to lose track of what is appended where.
It can happen when the html skeleton is being rather scarce, for most of the page is created in js. It's a bit unclear to anyone but the original developer, so he needs to keep track of what is going on. Imo this is a bit impractical.
I wouldn't create elements in the body in js, I'd rather append them to existing wrapper containers, so I could easily manage them with any css:
<div id="mainWindow"></div>
<div id="image"></div>
<div id="below"></div>
if You switch the target div from the body, to #image, You can rearrange them however You like, without making any changes in the js code, which could cause a chain of unpredicted behaviour.
Now the desired arrangement could be made using the position:relative; css property.
I'm using Google translate and I'm altering it a bit. Now I'm having a weird problem. It doesn't work.
JavaScript Code
var setWidthgoog = $(".goog-te-gadget-simple").width();
$(".google-t").css({"width": (setWidthgoog) + 'px'});
HTML code
<div class="google-t">
<div id="google_translate_element">
<div class="skiptranslate goog-te-gadget" dir="ltr">
<div id=":0.targetLanguage" class="goog-te-gadget-simple" style="white-space: nowrap;">
</div>
</div>
</div>
</div>
If I put the same code in the console it works...
Thoughts?
The google translate im refering is this (the website plugin)
http://translate.google.com/manager/website/
EDIT
Thanks to War10ck i discover that the plugin is only called after aprox. 2s, is there anyway to make it to call faster?
Test with a settimeout, maybe someother code wants to override and
might be after your code
– joyBlanks
That actually worked!, tough i don't know what the google plugin may be calling after my code :S
I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!
Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.
Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");
What would be a good way to show hidden content with javascript, without having the image elements <img src="myimage.jpg"> of the hidden content load their images in google chrome or any other browsers until the content is actually shown?
hiding the content with the css rule display: none will not prevent the images from loading, and I would like to avoid using ajax calls.
EDIT 1 as discussed in the comments, a better alternative would be to use a template. As an example I picked John Resig’s Microtemplating engine:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>
See fiddle
EDIT 2
As the original poster commented, it's perfectly possible to grab the contents of a <script type="text/html"> element. Templating engine's not necessary:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>
First Answer
(see in edits)
To do what you want within your requirements you could have javascript write the content when you want it displayed. So you would store your HTML in a javascript string and just use script to then insert it into the page when you want it. Its not a very nice way of doing it but it would mean that it would only load images at that point.
Alternatively you could put the HTML in but have the images pointing at nothing (or a blank placeholder, etc.) and then use script to programatically populate the image sources to the correct values when you call the show function to show the page.
Which of these you choose is probably more about readability than anything else though I would favour the second approach (just tweaking the image sources).
First, define a CSS style:
.invisible {
display: none;
}
Add this class to the objects in the HTML. Then anywhere in the JavaScript, simply add or remove the class, or change the display to block or float etc. In jQuery:
http://api.jquery.com/addClass/
http://api.jquery.com/show/
EDIT:
If you don't want the image to load, then use an AJAX call instead.
http://api.jquery.com/jQuery.get/
jQuery.get('myImage.jpg', function(data) {
jQuery('.imageContainer').html(data);
});
EDIT 2:
Load the src into the img once it's needed. You could check the scroll position etc.
http://jsfiddle.net/LYMRV/
Seems like it is possible to hide content using a script tag with type="text/html", it even prevents any images and iframes from loading in the background,
for example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener('click',function(e){
if(e.target.id=='content_show'){
e.preventDefault();
document.getElementById('content_visible').innerHTML = document.getElementById('content_hidden').innerHTML;//document.getElementById('content_hidden').text also works
}
});
</script>
</head>
</body>
<img src="image1.jpg"/>
<script type="text/html" id="content_hidden">
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</script>
Show Content
<div id="content_visible"></div>
</body>
</html>
Only thing to keep in mind is to avoid placing script tags inside #content_hidden.
Now if anyone is friendly enough to point out every flaw in this method, so that we can all benefit.
I have a twitter share button and a facebook share button in my blog page. The twitter counter always shows, but the facebook one only shows when you post something, and then goes away when the page is refreshed and does not show up again until something is posted. I want it to show all the time as to adhere to design cohesiveness.
<div id="share_stuff">
<div class="share_buttons">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class="share_buttons">
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
</div>
The page needs to be shared at least 3 times before the counter appears.
More information can be found here:
http://wiki.developers.facebook.com/index.php/Talk:Facebook_Share#Counter_only_displays_on_interaction
From what i can tell the official facebook share works in the way you have described above by design. If you use http://www.fbshare.me instead it will show you the count on page load etc.
Try this
http://addthis.com
The easiest way to do it for me was to add a css rule above your button:
<style>
.fb_share_no_count {
display: block !important;
}
</style>
<div>
<a name="fb_share" type="box_count" expr:share_url="data:post.url" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
This blog has the answer, you have to hack the FB.Share JS file and change one parameter, I can vouch this works as of this writing.
http://kopepasah.com/social-media/facebook/facebook-share-count-button/