I'm using the Colorbox module in Drupal 7. I'm opening an external website. I can make it work with a link. Click here, then click the "colorbox popup" link at the bottom, middle column. The client would like this to open automatically when the page opens. I've created a block and added the following code (from the colorbox site).
<script type="text/javascript">
// Display a welcome message on first visit, and set a cookie that expires in 30 days:
if (document.cookie.indexOf('visited=true') === -1) {
var expires = new Date();
expires.setDate(expires.getDate()+30);
document.cookie = "visited=true; expires="+expires.toUTCString();
jQuery.colorbox({html:"URL goes here", width:887, height:638});
}
</script>
But it does not work.
Any help would be greatly appreciated.
You need to wait until the DOM is ready:
<script type="text/javascript">
$(document).ready(function(){
// Display a welcome message on first visit, and set a cookie that expires in 30 days:
if (document.cookie.indexOf('visited=true') === -1) {
var expires = new Date();
expires.setDate(expires.getDate()+30);
document.cookie = "visited=true; expires="+expires.toUTCString();
jQuery.colorbox({href:"URL goes here", width:887, height:638});
}
});
</script>
You will need to set the open parameter to true.
So you can write:
jQuery.colorbox({href:"URL goes here", width:887, height:638, open: true});
This is documented here:
http://www.jacklmoore.com/colorbox
Related
I'm making a "share button" to share the current page. I would like to take the current page URL and open it in a new window. I have the current URL part working, but can't seem to get the next part working.
I'm struggling with the syntax. I would like to specify the new window size to width=520, height=570.
Something like:
<a target="_blank"
href="https://www.linkedin.com/cws/share?mini=true&url=[sub]"
onclick="this.href = this.href.replace('[sub]',window.location)">
LinkedIn
</a>
Any ideas?
Use window.open():
<a onclick="window.open(document.URL, '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');">
Share Page
</a>
This will create a link titled Share Page which opens the current url in a new window with a height of 570 and width of 520.
Just use window.open() function? The third parameter lets you specify window size.
Example
var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
var URL = "https://www.linkedin.com/cws/share?mini=true&url=" + location.href;
var win = window.open(URL, "_blank", strWindowFeatures);
Don't confuse, if you won't give any strWindowFeatures then it will open in a new tab.
window.open('https://play.google.com/store/apps/details?id=com.drishya');
I know it's too late, but,
Steps for opening a link in a new tab:
Create an a element
Set the href ( "https://example.com" )
Set target to "_blank"
Click on the link
Code:
<button onclick="myFunction()">Open</button>
<script>
function myFunction() {
var link = document.createElement("a")
link.href = "https://example.com"
link.target = "_blank"
link.click()
}
</script>
The following is JavaScript to be used in a function:
Note, I have 1's and 0's instead of yes and no.
var theTop=((screen.height/2)-(theHeight/2))/2;
var theLeft=(screen.width/2)-(theWidth/2);
var features = 'height=600,width=800,top='+theTop+',left='+theLeft+',toolbar=1,Location=0,Directories=0,Status=0,menubar=1,Scrollbars=1,Resizable=1';
window.open(in_uri, WindowName, features);
I am new to protractor and AngularJS just starting to get the hang of it. I have a login page that on click opens a new browser tab. The new browser tab is where I want to continue my test however I do not know how to do switch to the new browser tab.
I've tried the below code that was suggested here however it didn't do anything just stayed on the page.
element(by.css('span.icon.icon-add')).click();.then(function() {
browser.getAllWindowHandles().then(function(handles) {
newWindowHandle = handles[1]; // this is your new window
browser.switchTo().window(newWindowHandle).then(function() {
element.all(by.css("input[type$='text']")).first().clear().sendKeys('anemailaddy#newmarketinc.com');
});
});
});
Any help would be fantastic! Thank you
changed code to look like this:
this.clicksAddUser = function() {
element(by.css('span.booking-icon.icon-gear')).click();
element.all(by.css('li:nth-of-type(4) > a')).click().then(function() {
browser.getAllWindowHandles().then(function(handles) {
newWindowHandle = handles[1]; // this is your new window
browser.switchTo().window(newWindowHandle).then(function() {
element(by.css('span.icon.icon-add')).click()
element.all(by.css("input[type$='text']")).first().clear().sendKeys('anemailaddy#newmarketinc.com');
});
});
});
Because I was clicking a drop down menu in a separate this statement the drop down menu was closing before there was a chance to click on the login button. combined the code fixed the problem.
I am trying out the mmenu plugin (http://mmenu.frebsite.nl/) and am super excited about it. I have it working for my responsive site... The only problem is that, when I go from a width with the mmenu working to a desktop view (like say 768px to 1024px or bigger), I need the mmenu to go away, remove itself, etc.
Because the mmenu plugin pulls my nav list out of its original spot in the HTML, I need it to get put back again and show itself... Not seeing anything about this in the docs. If I missed it or you have ideas, let me know!
Thanks.
Rather than clone the menu I think a better option would be to initiate the jQuery function when the screen is below a certain size.
$(window).resize(function() {
if ($(window).width() < 768) {
$(function() {
$(' nav#menu').mmenu();
});
}
else {
do some thing else
}
});
I have solved this by cloning the menu when the browser size is reduced (using Harvey: http://harvesthq.github.io/harvey/) and only activating it with mmenu at this point. When I resize back up, I delete the cloned mobile version of the menu, and then show the desktop menu again. One problem I faced was that if you resize back up to desktop with the mobile menu expanded, it didn't automatically close. I fixed this by adding a trigger event to close it before removing the mobile version.
Markup:
<ul id="menu">
<li class="menu-item">
Home
</li>
.....
</ul>
Jquery:
$( document ).ready(function() {
/* Add and remove the mobile version of the menu */
var toggleMenu = {
elem: $("#menu"),
mobile: function(){
//clone the existing top menu and append it to the mobile menu
var menu = this.elem.clone(true).addClass("mobile-added").appendTo("#mobile-menu");
//activate mmenu
$("#mobile-menu").mmenu({
position: "right",
zposition: "back",
});
//hide desktop top menu
this.elem.hide();
},
desktop: function(){
//close the menu
$("#mobile-menu").trigger("close.mm");
//remove cloned menu
$('.mobile-added').remove();
//reshow desktop menu
this.elem.show();
}
};
Harvey.attach('screen and (max-width:1024px)', {
setup: function(){ // called when the query becomes valid for the first time
},
on: function(){ // called each time the query is activated
toggleMenu.mobile();
},
off: function(){ // called each time the query is deactivated
}
});
Harvey.attach('screen and (min-width:1025px)', {
setup: function(){ // called when the query becomes valid for the first time
},
on: function(){ // called each time the query is activated
toggleMenu.desktop();
},
off: function(){// called each time the query is deactivated
}
});
});
You have to clone the menu and making a media query.
http://mmenu.frebsite.nl/support/tips-and-tricks.html
Here you can find the explanation.
Post that in your CSS
#media screen and (min-width:1000px) {
#menu {
display:none
}
}
Hi may be setting the options will help you.
The options page is here
and a working example is here and here
Using Titanium mobile sdk 1.7.2, I created a tabgroup with 11 tabs. The problem is when I open any of the tabs inside the 'more' tab, if the child window has a right navbar button, some times the 'edit' button of the 'more' tab doesn't go away..
my code is:
app.js:
var tabGroup=Titanium.UI.createTabGroup({top:20});
............
/** list of windows and tabs **/
............
var win9 = Titanium.UI.createWindow({
url:'discover.js',
title:'Discover',
navBarHidden:true,
barColor: navBarColor
});
var tab9 = Titanium.UI.createTab({
icon:'images/icons/Discover.png',
title:'Discover',
window:win9
});
discover.js:
win=Titanium.UI.currentWindow;
var btn=Titanium.UI.createButton({title:'Discover'});
btn.addEventListener('click',function (){
//do some stuff
});
win.rightNavButton=btn;
the problem is, sometimes when I open the 'tab9' which opens 'win9' my button (btn) doesn't appear, the 'edit' button of the 'more' is shown instead.
N.B: the click event listener works just fine, It is the 'edit' title that persists. Any one knows how to solve this?
thank you,
You need to set allowUserCustomization:false in your Tabgroup.
var tabGroup=Titanium.UI.createTabGroup({top:20,allowUserCustomization:false});
try to set
win.rightNavButton = null;
win.rightNavButton = btn;
I'm trying to open a new window via a button to the configuration page but how do you add a title (at the top of the screen) to a newly created window?
On the starting page, I have a button created to open a new page as:
var btnConfig = Ti.UI.createButton({
backgroundImage:'img/settings.png',
height:33,
width:33
});
win1.rightNavButton = btnConfig;
btnConfig.addEventListener('click',function(){
Ti.include('win_config.js');
})
Then on win_config.js :
var win_config = Titanium.UI.createWindow({
title:"Configure",
backgroundColor:'#BBB',
});
win_config.open({
transition:Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT
});
I thought that by just setting "title" it'll appear but apparently it doesnt.
needed to add "modal:true" in the createWindow
var win_config = Titanium.UI.createWindow({
title:"Configure",
backgroundColor:'#BBB',
modal:true
});