It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
My popup box code works fine on blogger but i want to show this once to each user in 1 month
i tried using cookies but doesn't work , i spent my whole day searching only this but nothing works .
My code is
<!-- Facebook POPUP LikeBox With Timer Code Start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2 /jquery.js"></script>
<style type='text/css'>
#exepopup{background-color:#fff;position: fixed;top:50%;z-index:9999;display:none;padding:0px;left:50%;border:10px solid rgba(82, 82, 82, 0.7);-webkit-background-clip: padding-box; /* for Safari */background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */-webkit-border-radius:8px 8px 8px 8px;-moz-border-radius:8px 8px 8px 8px;border-radius:8px 8px 8px 8px;width:400px;height:360px;margin-left:-200px;margin-top:0px;overflow:hidden;}#exepopup span{font-size:20px !important;font-weight:bold !important;}#exepopup h1{background:#6d84b4 url(http://4.bp.blogspot.com/-wbOyGFuANTQ/UVF1F4ouC4I/AAAAAAAABiA/RX4jNlICbjM/s1600/aktechz-fb-lock.png) 98% no-repeat;border:1px solid #3b5998 !important;color:#FFFFFF !important;font-size:20px !important;font-weight:700 !important;padding:5px !important;margin:0 !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;overflow:hidden !important;}.exepopupdata{font-size:12px !important;font-weight:normal !important;height:265px !important;padding:1px !important;background:#fff !important;border-bottom:2px solid #ddd;overflow:hidden !important;}#exepopupfooter{text-align:left;background:#F2F2F2 !important;height:56px !important;padding:10px 10px 10px 10px !important;overflow:hidden !important;}#exepopupclose{float:right;background-color:#eee !important;border:1px solid #ccc !important;color:#111 !important;font-weight:bold !important;padding:5px 8px 5px 8px !important;text-decoration:none !important;display:inline-block !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;outline:none !important;position:relative !important;font-size:18px !important;margin:1px !important;}#exepopupclose:active{top:1px;left:1px;}</style>
<script type="text/javascript">
jQuery(document).ready(function() {
function exepopupfunc() {
var sec = 15
var timer = setInterval(function() {
$("#exepopupfooter span").text(sec--);
if (sec == 0) {
$("#exepopup").fadeOut("slow");
clearInterval(timer);
}
},1000);
var exepopupwindow = jQuery(window).height();
var exepopupdiv = jQuery("#exepopup").height();
var exepopuptop = jQuery(window).scrollTop()+50;
jQuery("#exepopup").css({"top":exepopuptop});}
jQuery(window).fadeIn(exepopupfunc).resize(exepopupfunc)
//alert(jQuery.cookie('sreqshown'));
//var exepopupww = jQuery(window).width();
//var exepopupwww = jQuery("#exepopup").width();
//var exepopupleft = (exepopupww-exepopupwww)/2;
var exepopupleft = 500;
//var exepopupwindow = jQuery(window).height();
//var exepopupdiv = jQuery("#exepopup").height();
//var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2;
jQuery("#exepopup").animate({opacity: "1", left: "0" , left: exepopupleft}, 0).show();
jQuery("#exepopupclose").click(function() {
jQuery("#exepopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="exepopup">
<h1>Title...</h1>
<div class="exepopupdata">TEXT
TEXT TEXT
</div>
<div id="exepopupfooter">be patient..</div></div>
<!-- Facebook POPUP LikeBox With Timer Code End -->
please post full code
use j query cookie plugin with simple if else statement
Related
So i've installed the facebook customer chat messenger plugin on my website and it works fine, but i need to align it to the left of the website and if possible also change the size of the button (it's huge).
my code is:
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/pt_PT/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fmessengerBtn">
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml: true,
version : "v3.2"
});
};
</script>
<div id="fb-root"></div>
<div class="fb-customerchat"
attribution=setup_tool
page_id="372545293082246"
theme_color="#0b9bb8"
greeting_dialog_display="fade"
greeting_dialog_delay="60"
ref="home"
logged_in_greeting="Fale conosco"
logged_out_greeting="Fale conosco">
</div>
</div>
i've tried just using CSS to align the container div but then the chat window will stay on the right side of the website... Is there some sort of attribute or option to set the thing to go to the left side instead? Surely this is something lots of other people have needed to do
also, the greeting_dialog_delay option doesn't seem to be working
The following CSS seems to work for now (since the classes may change) :
/* ***************
* FB on left side
******************/
/* This is for the circle position */
.fb_dialog.fb_dialog_advanced {
left: 18pt;
}
/* The following are for the chat box, on display and on hide */
iframe.fb_customer_chat_bounce_in_v2 {
left: 9pt;
}
iframe.fb_customer_chat_bounce_out_v2 {
left: 9pt;
}
I tweaked the code a bit in case you want to keep the widget on the bottom right but just move it over to the left some (e.g., it is blocking another element)
.fb_dialog.fb_dialog_advanced {
right: 18pt;
margin-right: 50px;
}
iframe.fb_customer_chat_bounce_in_v2 {
right: 9pt;
margin-right: 50px;
}
iframe.fb_customer_chat_bounce_out_v2 {
right: 9pt;
margin-right: 50px;
}
To add to #Cubakos' answer to get the bounce in and bounce out animation:
#keyframes fb_bounce_in_v2 {
0% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}
50% {
transform: scale(1.03, 1.03);
transform-origin: bottom left;
}
100% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}
}
#keyframes fb_bounce_out_v2 {
0% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}
100% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}
}
Try Below Code
.fb_dialog {
position: -webkit-sticky !important;
position: fixed !important;
bottom: 95px !important;
right: 30px !important;
}
Combining #Cubakos & #Kuttoosan answers + made an adjust for positing the chat bubble as the posted methods here no longer work for me.
/* The following is for the chat bubble */
.fb_dialog_content>iframe {
left: 18pt;
}
/* The following are for the chat box, on display and on hide */
iframe.fb_customer_chat_bounce_in_v2 {
left: 9pt;
}
iframe.fb_customer_chat_bounce_out_v2 {
left: 9pt;
}
/* The following are for the bounce in/out animations */
#keyframes fb_bounce_in_v2 {
0% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}
50% {
transform: scale(1.03, 1.03);
transform-origin: bottom left;
}
100% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}
}
#keyframes fb_bounce_out_v2 {
0% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}
100% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}
}
After a while, I realize that we couldn't customize this plugin by CSS because
"it isn’t possible to style the elements contained within an iframe as
you would with normal HTML elements on your site due to HTML
limitations"
https://wordpress.org/support/topic/resize-messenger-icon/
You can customize your chat plugin from Facebook Business Page only 3 things:
Alignment
Color
Bottom Spacing (For mobile and desktop)
In the right page, there are preview pages for you to know how your customization will be like.
After customizing, don't forget to click on the button PUBLISH to save your changes.
It's a pain that you cannot resize the logo or styling it more easily, I hope that Facebook in the future can give us more power to do what we want with this.
Was Simple as below.
.fb_dialog.fb_dialog_advanced iframe {
right: auto !important;
left: 2rem;
bottom: 2rem !important;
}
Here's how I edited it properly. Get ready for a fun navigation run! (learn from our wasted 4h)
Switch or login as your facebook professional account
Go to your facebook page
Click "Manage"
On the left menu, under "Your Tools" click "Messaging Settings"
(Now it takes you to a new dashboard)
On the left menu click inbox again (even though you are already on it)
Click top gear icon.
Under "Inbox Modes", click "View all settings"
Select Chat plugin on the left
Scroll down and voila... now you can edit the chat positioning
I have an idea where when an Icon is click on my SharePoint site it will redirect people to a page which is linked with their user group. Issue is i do not know how to do this. I have found a web application which does this but it seems it doesn't want to work.
Any other solutions, Also if code could you please provide and example of the code so i know what to do :) Thanks
Update
<style type="text/css"> .redirect { TEXT-ALIGN: center;
PADDING-BOTTOM: 100px; PADDING-LEFT: 300px; PADDING-RIGHT: 300px;
FONT-WEIGHT: 900; PADDING-TOP: 100px }</style><script
type="text/javascript">
var
URL="URL HERE",timer=0,current="none",popup="",msg="",img="";
if (popup) alert(popup);
var d=new
Date(),a=document.getElementById("aspnetForm"),b=document.getElementsByTagName("body")[0],c=document.createElement("div"),i=document.createElement("img"),t=document.createElement("div");
a.style.display=current;c.className="redirect";i.src=img;c.appendChild(i);c.appendChild(t);b.insertBefore(c,a);
function wait(){var tleft=Math.round(timer-(new
Date())/1000+d/1000);if (tleft>0) {t.innerHTML="<p>"+msg+"</p><p>Wait
for "+tleft+" second(s) or <a href='"+URL+"'>click here</a> to be
redirected.</p>";setTimeout("wait()",1000);}else
{t.innerHTML="<p>Redirecting</p>";window.location.href=URL;}}
wait();</script>
The above code works in a Content Editor webpart as it redirects all users to the page, but is there a way which i could use this code to say if(user.group ="Spain") then redirect?
Small example to achieve this
public bool IsUserInGroup(SPWeb web, SPUser user, string groupName)
{
try
{
SPGroup group = web.Groups[groupName];
return IsUserInGroup(user, group);
}
catch
{
return false;
}
}
public bool IsUserInGroup(SPUser user, SPGroup group)
{
return user.Groups.Cast<SPGroup>().Any(g => g.ID == group.ID);
}
//Redirect for example:
SPUser user = web.CurrentUser;
bool isInGroup = IsUserInGroup(web, user, "My Custom group");
if(isInGroup)
{
Response.Redirect("some url");
}
Hope it will help
I have a UIWebView with text which contains web links inside it. The test is being displayed from DB.
For some links inside text, UIWebView detects links and for some links it does not. In DB all the links are written with same format that after space, I have link. Please help me that why some links are working and not?
Thanks in advance.
NSString *newString =[NSString stringWithFormat:#"<html><script> document.ontouchmove = function(event) { if (document.body.scrollHeight == document.body.clientHeight) event.preventDefault(); } </script><script type='text/javascript'>function myFunction() { window.open('http://www.otherlink.com');} function myFunction1(){window.open('http://www.newlink.com');}</script><style type='text/css'>.layout {padding:6px 10px 12px; width:300px; height:398px} *{padding:0; margin:0;line-height:normal}img{margin-bottom:10px;width:300px} button{padding-bottom:7px; border:none; text-decoration:underline;text-align:right;float:right; font-family:ArnhemPro-Blond; font-size:13px; color:#666666}.headline {color:#000000; font-family:PublicoHeadline-Light; font-size:28px; padding-bottom:4px;}.subHeadLine {color:#585c74; font-family:ApexNew-Book;margin-bottom:10px;font-size:14px;}.fullText {font-size:13px;font-family:ArnhemPro-Blond;margin-bottom:7px;} .fullText p { color:black; font-size:13px; margin-bottom:7px} .fullText a { text-decoration: underline; color: #A6091E; font-weight:bold;} .clr {clear:both;} </style> <body><div class='layout'><p class='headline'>%#</p><p class='subHeadLine'>%#</p><img src='%#'/><p class='fullText'>%#</p><button onclick='myFunction()'>Try it</button><div class ='clr'></div><button onclick='myFunction1()'>Try it Next</button></div></body></html>",headLine,subHeadLine,path,fullText] ;
It shows text+image+2 buttons.
This was an encoding issue. just changed encoding to
NSUTF8StringEncodeing and the issue was resolved.
I'm having problems with IE9 ignoring the select borders when printing a multiple select.
Here's how to recreate the problem:
Open IE9 on Windows 7.
Go to w3schools's multiple select edit page.
Now highlight the options and copy/paste until there is a long list of duplicates.
Then remove the size attribute.
Click on "Edit and Click Me" so that the page reloads and you now have your modified select in the second panel.
Now, print the document (even using the XPS viewer).
For me, all of the options are printed on the page, even though the select is only 4 option elements tall. This still happens to some degree if you leave the "size" attribute at the default value of 2, but it's far more obvious when it is changed or removed.
Is anyone else experiencing this? Is this an IE bug? Does anyone know of a workaround?
You can work around this by viewing the site in IE9's compatibility mode. Usually IE will determine that it cannot display a site properly and give you the option to turn on compatibility mode from within the address bar but sometimes you need to explicitly set it.
How to turn on compatibility mode - http://www.sevenforums.com/tutorials/1196-internet-explorer-compatibility-view-turn-off.html - I used the first one in method 2.
There doesn't seem to be any CSS solution for this. Instead, I wrote a small jQuery script that copies the <select multiple> contents into a <div>, so that it can be printed. Then I applied some CSS to make it look like a select, and only show the copy when actually printing.
Script:
//jQuery required
$(function() {
if(!$.browser.msie) return false;
$('select[multiple]').each(function() {
$lPrintableDiv = $('<div data-for="' + this.id + '" />').addClass($(this).attr('class')).addClass('printable');
//update printable on changes
$(this).after($lPrintableDiv).change(function($aEvent){
updatePrintable($aEvent.target);
});
//run once on load
updatePrintable(this);
});
});
function updatePrintable($aTarget) {
var $lSelect = $($aTarget);
var $lSelected = $($aTarget).val();
var $lPrintable = $('[data-for="'+$aTarget.id+'"]');
$($lPrintable).width($lSelect.width()).height($lSelect.height());
$($lPrintable).html('');
$($aTarget).children().each(function($lElm){
$lVal = $(this).val();
$lLabel = $('<label />').text($lVal);
$lOption = $('<input type="checkbox" />').val($lVal);
if($(this).is(':selected'))
$lOption.prop('checked', true);
$lPrintable.append($lOption).append($lLabel);
});
}
CSS:
.printable {
border: 1px solid grey;
display: none;
overflow: auto;
}
.printable label {
display: block;
font: .8em sans-serif;
overflow: hidden;
white-space: nowrap;
}
.printable [type="checkbox"] {
display: none;
}
.printable [type="checkbox"]:checked + label {
background: #3399ff;
color: white;
}
#media print {
select[multiple] { display: none; }
.printable { display: inline-block; }
.printable [type="checkbox"]:checked + label { background: grey; }
}
Also see the jsFiddle and original post about this fix
I try to make a slider similar to the iPhone unlock Slider, that forwards to a linked site, when complete, and returns to its initial position when the slider wasn't dragged to the end.
This is not meant to be a iPhone webapp, i just want to put this to a general website as a effect.
So far I've tried those two tests, but i'm stuck on both.
The first is:
// First Example
var el = $('slideOne'),
// Create the new slider instance
var sliderOne = new Slider(el, el.getElement('.slider'), {
steps: 20, // There are 35 steps
range: [8], // Minimum value is 8
}).set(20);
Problem here is that i can't fire an event on (0) not on (20) aswell, i tried onComplete but this fires the function immediatly after the page is load!?
The second
$$('.textslider').setStyle('opacity', 0.8);
$('slider1').makeDraggable({
snap: 0,
container: 'slideOne',
droppables: '.slidedrop1',
onDrop: function(element, droppable, event){
if (!droppable);
else console.log(element, 'dropped on', droppable, location = 'index.php/kredite.html', event);
},
});
Problem here is , that the droppable don't work as fine as i hoped, sometimes i move the the slider on the invisible droppable, which indicates if the slider is dragged to the end, and nothing happens, sometimes it works fine, i think this may be due the different position of the cursor on the slider. and i can't get it done that it is only possible to slide horizontal , since it is that drag not the slider function, so i think this won be the proper way.
On both Tests, i didn't figured out who i could return the slider back to its initial position, with a slide Effect.
Are there some mootools cracks around who maybe could help me with this? Thanks already for the great ideas of y'all.
<html>
<head>
<script type="text/javascript"
src="http://demos.mootools.net/demos/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var el = $('slideOne');
var debug = $('debug');
var ACTIVATE_VALUE = 20;
var mySlider = new Slider(el, el.getElement('.knob'), {
range: [0], // Minimum value
steps: ACTIVATE_VALUE, // Number of steps
onChange: function(value){
if (value == ACTIVATE_VALUE) {
debug.setStyles({color:'green'});
// go to url after delay
(function(){
location.href='http://joecrawford.com/';
}).delay(500);
} else {
debug.setStyles({color:'red'});
// if not activated, reset after 2 second delay
(function(){
value = 0;
mySlider.set(value);
}).delay(3000);
}
debug.set('text', value);
}
});
mySlider.set(0);
});
</script>
<style type="text/css">
div.slider {
width: 200px;
height: 50px;
background: #eee;
}
div.slider div.knob {
background: #000;
width: 50px;
height: 50px;
}
div#debug {
font-family: sans-serif;
font-size: xx-large;
}
</style>
<title>Slider that resets if it does not reach the end</title>
</head>
<body>
<div id="slideOne" class="slider">
<div class="knob"></div>
</div>
<div id="debug">-</div>
</body>
</html>