I'd like to change the like button design of facebook's default like button on my page, because it just doesn't fit in there and it looks horrible anyways... =)
Approach 1: Use Javascript to change design inside iframe. => Failed because the iframe is on domain "facebook.com" and the script runs on my site...
Approach 2: Simply put an image over the actual button. => Always goes into background, dirty solution anyway...
Approach 3: Look at 9gag.com's like button (they did it nicely). => Couldn't figure out, what exactly they are doing, they're triggering some JS when the button is clicked, but I have no clue what happens then...
Can anyone think of some better solutions, or give me a hint how the 9gaggers did it? Btw, my website is lolkitten.org, feel free to lay your hands on it... =)
Cheers
I just found this tutorial earlier today:
http://olegnax.com/492-custom-share-button-facebook/
Related
I have this code creating a popup/tooltip when specific text is hovered by the user:
function popup() {
$('#example').load("example.html");
}
I add this to make the tooltip appear:
<div id="example" onmouseover="popup(this)" onmouseout="popup.close();">Hover over this!</div>
What that's doing, I'm happy I succeeded figuring out, is when the user hovers over the text "Hover over this!" a window appears and displays example.html as the content of the popup window. I included onmouseout="popup.close();" in an attempt to get it to automatically close.
I'm trying to get it to also close the popup when the user moves their mouse away from the text. I've tried this:
function popup() {
$('#example').load("example.html");
}
function close(){
popup(this).close();
}
Which, obviously to those who know more than me, didn't cause the window to close.
How do I have to write a very simple version of this code correctly so it closes the popup onMouseOut?
I've found this solution that's very similar but I'm not 100% sure how to edit that either to get it loading the external page I want.
Edit: Nope. The solution in the above link didn't work out for me.
I'm not super skilled in JS, so bear with me. It looks like you have a function to display the popup, so I will assume that is working well. I only have a few suggestions, my best one is to have an if/else statement.
If the mouse cursor is over the text, display the popup.
Else, hide the popup.
I don't see a reason why the functions you set up wouldn't be working, so you should just be able to add that. For fear of giving incorrect advice, I will not be showing code because I suck at JS and it will probably be incorrect. But do some research and see if that works. Some other people might have better feedback than me.
First, you have to know the basics of JS.
jQuery is its library/framework, written by an enthusiastic programmers like you. At first, JavaScript.
<div onmouseover="this.innerText='7'"
onmouseout="this.innerText='77'">Hover please!</div>
On mousing over it, the text is 7, on mouse out it is 77 .
This is basic.
And the language is not Java.
JavaScript is easier a little bit.
This is what you got to know now.
The first thing here you have to know is HTML on the web.
Then you get to JavaScript (basically without jQuery at first ).
You were using the jQuery library ajax methods of JavaScript .
<!--normal code (it's a comment!)-->
<script>function getLoad(){return '<iframe src="example.html"/>' }</script>
(return means give out value).
<div onmouseover="this.innerHTML=getLoad()" onmouseout="this.innerHTML='Hover please!'">Hover please!
</div>
Can i hide my wordpress blog site's page source like this? I have to ask this question because there are many plugins which can disable page source and right-click. but after typing manually "view-source:url" in browser it instantly shows the source-code of wordpress site.If any body knows answer please write down . this is very important for all bloggers 'I think' .
TLDR: No, you can never hide the soure code of your page. There is NO way.
For a browser to render a web site you need to send it the HTML, CSS, and javascript code. Even though you can make it "harder" to see the code by disabling right click, anyone with just a little bit of understanding of the web will be able to read it easily (F12 in most browsers).
As a website designer it is important for you to understand this concept as it is very important in deciding on how to design your web site. Things the user should not see need to happen on the server side (where no user can reach it). Only things which dont matter if anyone can see should be sent to the user.
I think you cannot hide the whole code. Or do you want to hide a specific part of the code? For example, you can hide/encrypt the URL of an iframe in which you can display more sensitive content. However, I also don't really know how to do it in WordPress (I searched for a solution many times) but I heard it's possible.
I'm curious what about the answers.
I wouldn't even consider doing this. Not only does it ruin the end-user's experience, it can actually stop people with disability copying text from your site or using other right-click menu items.
You can't hide your code, but you can obfuscate some of it.
CSS Obfuscater.
JSS Obfuscater.
I'm trying to accomplish something that might be relatively simple, but I don't know what I would call it (if there is a specific name for it), hence my searches have proved useless.
What I'm trying to accomplish is simple: I have a page built off off the Masonry jquery plugin (similar to http://designshack.net/tutorialexamples/masonry/demos/masonry.html). All I want to do is that when I click on a specific picture, it creates a "box" that fills up part of the screen and can contain another webpage (to describe the picture) while fading out most of the background. Then when I click outside of the box, it returns to all of my pictures.
I've seen this before, as I'm sure everybody else has, but for the life of me I cannot remember an example to look at or how best to do this. I don't have too much experience with javascript or jquery (which is why I'm asking this), but any help to point me in the right direction, whether it is using javascript or html/css, would be great.
If anybody does get the gist of what I'm describing and can explain it better, then you're more than welcome to edit..
What you need are modal windows.
I know the twitter bootstrap has built a pretty good framework for this:
http://getbootstrap.com/javascript/#modals
If you aren't using the bootstrap directly you might be able to pick out what you need.
I'm trying to create or atleast understand the technology used in the website of www.ziggo.nl. They implemented ajax on such a nifty way! If you click on 'Producten' the whole page loads (mind the link /#producten/), if you lick on 'Alles in 1', the hashlink changes to (/#/producten/alles-in-1/, but only the content of the page changes instead of the whole page. Even the backbutton works!
Does anyone of you guys know how I can make something like this? I came across ajaxy for jquery but I think it's not the thing I need.
Hope someone has some advice!
Regards,
Rogier
Check out JQuery Address. It does seem similar to ajaxy (hadn't seen that one before), but I'm not sure why it is "not the thing you need", as both seem to address the issue in your question.
I am coding some sort of booking system - calendar. One of the features is also a (js) pop up window with detailed information about event - user can either view them or edit.
Now my problem - I have put there a HTML select control (dropdown box), quite simple - 5 options. But somehow, and I have no ide why, this select is uneditable - that means that after I click on it nothing happens (I do not get the list of the options).
I know that now I should put a code here, however, whole system is so complex that it would take me ages.
I do not await exact answer or solution of my problem. I would like to ask you for advice - what would you check? I went through CSS up and down - no clue at all. Maybe some javascript? But how? I do use one public js library, so it might be something there, I checked as well, no clue.
Any advice would be much appreciated. I am stuck now... :-(
Thanks a lot!
Peter
::EDIT::
I have found out what is was! The ID if that pop-up window is bbit-cal-buddle and there is this line in the .js:
$("#bbit-cal-buddle").mousedown(function(e) { return false });
which basically explains why I can't select anything in dropdown (funny thing - checkboxes and radio works!). So my question is: how do I exclude my select and option tag from that .js command?
I've found a useful option when the bug is that obscure is to logarithmically comment your code.
That is,
Comment 100% of the code that might be causing a problem.
Test
If it works, uncomment 50% of the code you commented and go to step #2.
If it doesn't work, you know the problem exists in the code you uncommented.
Yes, this is somewhat of a monolothic technique, but I've found it to be very useful in the past.
Regards,
-Doug
Just to be sure, turn off ALL styles. this will render your page without the styles(obviously) and check if you can click the drop down. If you can, it is 98% a CSS error. It happened to me awhile ago - most probably an absolutely positioned div is covering it.
If you still can't click it, bring back the CSS then disable all javascripts. It should still be clickable by then since and html select tag doesnt need JS to be clickable.
If it still doesn't work, try doing a regular html select tag and check if you can select that one. If you can, then there is something wrong with your select tag