I have Login and Sign Up forms.
Both are opening in Lightbox.
Login have Link to Sign Up and vice versa.
Links are working properly, but the issue is sign up box's height is 600px while that of login is 250px. So, When navigating from login to sign up, its opening with 250 height and scroll bar appears which gives ugly look.
I want Sign up should open with 600px height even when I am clicking it from login which have 250px height.
I am using thickbox.js for lightbox
What I tried is:
function signup() {
window.location="sign_up.php?TB_iframe=true&height=600&width=330";
}
If your forms from same domain then you can try this code before navigating iframe to another link:
window.parent.$('#TB_window').animate({
height: 600
});
So if you changing iframe location with signup function then you should modify it
function signup() {
window.parent.$('#TB_window').animate({
width: 330
height: 600
});
window.location="sign_up.php?TB_iframe=true&height=600&width=330";
}
Related
Using tab application in Face book,i am unable to set the height of the iframe which is always set to 800.
I have tried so many variations but nothing works for me.
FB.Canvas.setSize({ width: 640, height: 1480 });
FB.Canvas.setAutoResize();
FB.Canvas.setAutoGrow();
By the way i am using v2.9.
Can you please suggest me how to remove the scrollbar and show full page ?
I would like to use a different logo for my mobile version.
I found out that you add another logo in your HTML source code and then define in CSS which logo is shown based on page size.
My problem is that I use Wordpress and can't really access the source code. I can only write something in the functions.php file.
My logo is places in the navigation bar, which makes it more difficult, too.
Would be soooo thankful for any help :)
Daniel
My Page
Yes you can use media queries to do that for example :
.mobile-logo-class {
display:none;
}
#media screen and (max-width: 768px) { // 768px or your break point
.mobile-logo-class {
display: inline-block; // or block
}
.desktop-logo-class {
display:none;
}
}
Or you can use the "Picture" tag but be careful for IE Support:
https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015
In normal case, if your theme provides the options for mobile logo then you can upload different logo for your mobile sections,
if there are not options for the mobile logo into your theme then you can use media queries to set the path for mobiles width
or
you can use the plugins to show different logo for your website in mobile something like this.
https://wordpress.org/plugins/rocket-wp-mobile/
STEP 1: OK first copy the code of logo in your header file which one calling the log on your desktop, copy the code and paste it below the same dive now remove the PHP code and change the div class, and give there <img src=" your image path"> and save it. you can write HTML too for image
STEP 2: Now in CSS use CSS for hiding it. something like
.logo2-img {
display: none;
}
here logo2 is your 2nd div class .
STEP 3: Now write css with media query
#media screen and (max-width: 768px) { // 768px or your break point
.logo2-img{
display: block; //
}
.desktop-logo-class {
display:none;
}
}
thats it sorry for poor English
I put embed codes of videos in custom field, every embed code (video) from every site have a different size..
there is a way to set a specific size for all embed videos without change the sizes in the embed codes?
i mean just copy and past the embed code with all parameters and then some code will change the videos to specific size?
You can do that with CSS or JS. For example, you can:
Have specific width and height for iframe in css
Have a JS script that will resize your iframe dynamically, for example on document.ready.
An example of the CSS would be something like:
.content iframe { width: 600px; height: 480px; }
An example of the JS would be something like:
jQuery(function($) {
var iframes = $('.content iframe');
iframes.css('width', 600);
iframes.css('height', 480);
});
Please, note that these examples would apply to iframes that are within an element with class "content", for example <div class="content">.
Is it possible to have an image without watermark on my page and when people try to download the image by accessing the right click menu and "save image as". To let them download an image with the watermark applied to it?
So apparently you can check which mouse button was pressed in a mousedown event handler and if it was the right button change the source of the image:
$('img').on('mousedown', function (event) {
if (event.which == 3) {
this.src = this.src.replace('.jpg', '_watermark.jpg');
}
});
Here is a demo: http://jsfiddle.net/s6A9m/
No, this isn't possible, as you haven't any information about what is user currently doing with these images. You can, however, apply your watermark to the bottom or to the top of the image and then just hide part of an image in your html
To my knowledge, you're going to have to break the normal UX (User eXperience) to do this.
You could disable the right-click context menu and then create your own (say just for the images you want to watermark) so that when a user right-clicks an image, they are given the option to download the image but they are directed to the watermarked element instead of the non-watermarked element.
Here is the first search result from the search: "jQuery context menu"
http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/
You could also remove the users ability to right-click the image by placing a transparent element over the image that does not allow the click event to reach the image. Then give the user a clearly labeled link to download the image (but of-course you just direct the user to the watermarked image).
Here is a demo of this method: http://jsfiddle.net/xAjDp/
HTML --
<div class="container">
<div class="overlay"></div>
<img src="[src]" />
</div>
Download Image
CSS --
.container {
position : relative;
display : inline-block;
/*IE7&6 Compatibility*/
*display : inline;
zoom : 1;
_height : 366px;
}
.container .overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0;
filter : alpha(opacity=0);
zoom : 1;/*give the element "hasLayout"*/
}
Im integrating a simple chatbox application into my site, which is simply added by iframeing chat.php
I dont have a static place to put this on the webpage, and I want to load the iframe on top of the site's content on the top right (with ajax), which would remain visible unless I X it out at the top.
Auto-triggering the chatbox to load between page loads once its enabled (by checking the session that it wrote when the chatbox was first enabled) would also be nice.
I use the jquery framework, but Im not that proficient at it. Site is written in php.
What I was thinking is this
I have an empty div with id chatbox. When someone clicks a link to see the chatbox, it loads chat.php inside that div in an iframe, and adds a class to the div that would position the div in the top right corner.
<style type="text/css">
#chatFrame {
display: none;
width: 300px;
height: 200px;
/* some more styles */
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#activator').click(function() {
$('#chatFrame').html('<iframe border="0" frameborder="0" width="100%" height="100%" src="chat.php"></iframe>').show();
});
});
</script>
open chat
<div id="chatFrame"></div>
A simple and very neat solution : use PrettyPhoto (or any other lightbox style) plugin.
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
I like PrettyPhoto for it's simple look and so far I had no problem with it.
The code can be as simple as this :
Google.com
The website has all the details.