I have a question. I use Twitter Bootstrap to create theme.
I would like to create on my page something like preview with different size of views, but without change size browser window.
I want to create div with id "preview" and 4 buttons (xs,sm,md and lg) to change size this div to apply "mediaqueries" from TB.
Is it possible to do ?
You can change the size of the preview window with jQuery:
HTML
<div id="preview"> Large
Medium
Small
Extra small
</div>
CSS
#preview {
width: 1200px; // initial width
}
JS
$("#lg").on("click", function () {
$("#preview").css("width", "1200px");
});
$("#md").on("click", function () {
$("#preview").css("width", "992px");
});
$("#sm").on("click", function () {
$("#preview").css("width", "768px");
});
$("#xs").on("click", function () {
$("#preview").css("width", "767px");
});
JSFiddle: http://jsfiddle.net/6kLo0cxa/
Related
Here's my website http://tapash.atwebpages.com/
As you can see my logo is white and it becomes invisible when scrolled up. How can I specify a logo by CSS when scroll up the page and menu becomes sticky? I have another color logo which I would like to put there. Thanks
I have seen that you already use jQuery on your website. This makes it very easy to implement.
Give your image an ID for JavaScript:
<img src="LOGO_WHITE" id="test" />
Execute a function on scrolling:
$(window).scroll(function (event) {
...
});
When scrolling (your header turns white), a different image should be set:
$("#test").attr("src", "LOGO_BLACK");
But now the problem is that the logo is permanently black. You have to set the white logo again when the user scrolls at the top:
if($(window).scrollTop() <= 0) {
$("#test").attr("src", "LOGO_WHITE");
}
Your function should therefore look like this:
$(window).scroll(function (event) {
if($(window).scrollTop() <= 0) {
$("#test").attr("src", "LOGO_WHITE");
} else {
$("#test").attr("src", "LOGO_BLACK");
}
});
Example on JSFiddle: https://jsfiddle.net/18v9d5eq/1/
It looks like you're using a template from Drupal. If you are not familiar with web technologies, my solution above is the easiest. The cleanest solution would be to include both images (white and black) in the header and then just set the visibility with display: hide/block.
I use wix react-native-navigation. Navigation.showModal open fullscreen size. Is it possible to open the custom size? where do I find all the properties list about navigation layouts? Documentation is too meager...
Modal is always full screen. You can control your view's dimensions in jsx.
Instead of flex: 1 - use a predefined width and height according to your needs.
render() {
return (
<View style={{width: '80%', height: 150}}>
{ /* render Modal content */ }
</View.
);
}
Alternatively, if you need to interact with the UI behind the Modal you should use a Navigation.showOverlay
Navigation.showOverlay({
component: {
name: 'example.Overlay',
options: {
overlay: {
interceptTouchOutside: false // this make touch events pass through the invisible parts of the overlay
}
}
}
});
For more examples on Overlay used you can see code examples in the playground app
html
<p> Tags:<input name="tags" id="tags" /></p>
jquery
$('#tags').tagit( {tagLimit:3});
I want to control the size of input field,how can i do that ?
If you look at the dynamic HTML that is generated by the tag-it plugin, ul.tagit is the class assigned to the UL that is generated. So to set the width to 200px in your CSS set:
ul.tagit {
width: 200px;
}
(function( $ ) {
$.fn.extend({
tagit: function (params) {
return this.each(function () {
console.log(params);
console.log(params['tagLimit'] );
$(this).attr('maxLength', params.tagLimit );
$(this).parent().css('maxwidth', params.tagLimit );
$(this).parent().css('width', params.tagLimit );
});
}
} )
}( jQuery ));
But you can do it directly by jQuery too, like below:
var _width = 3;
$("p input").each( function() {
$(this).css('width', _width);
$(this).css('maxWidth', _width);
})
Since I had tag-it being used in multiple places, I decided to do it in Javascript. The size needs to be big enough that it doesn't do to a double line when you add tags to it. The basic code is:
// adjust tag it size
$("ul.tagit").attr("style", "width:450px;")
Offcourse, you can decide to choose something other than 450px.
However, I also wanted to line it up with other jquery-ui buttons, which I styled with ul, instead of li, so they would have a fairly snug fit with the search box. The bottom margin needs to be adjusted to have it line up more precisely with the buttons. Here is the code for that.
// adjust tag it size and line it up with buttons
$("ul.tagit").attr("style", "width:450px; display:inline-block; margin-bottom:-10px")
so here is my question:
lets say I have a page with 3 buttons. each contains a unique pattern as as background. I want to change the entire page background image once I click/ hover on one of the buttons.
what I need is something similar to http://subtlepatterns.com/
I dont need a stop preview option, as long as the background image change again when I select a different button.
how can I do that?
also, if its not possible, this will also work for me:
change the color of a DIV (instead of the entire page background) whenever I click/ hover on one of the buttons.
have 3 different body class in ur CSS sheet:
body.class1 {
background: ...;
}
body.class2 {
background: ...;
}
body.class3 {
background: ...;
}
use jQuery to dynamic change body class
$("#btn1").click(function() {
$('body').removeClass();
$('body').addClass('class1');
});
$("#btn2").click(function() {
$('body').removeClass();
$('body').addClass('class2');
});
$("#btn3").click(function() {
$('body').removeClass();
$('body').addClass('class3');
});
then finally put a id in each button to jQuery find this in DOM:
<a id="btn1">bg1</a>
<a id="btn2">bg2</a>
<a id="btn3">bg3</a>
Using just javascript you could do something like this
function changeBg(color) {
var color = '#' + color;
document.body.style.background = color;
}
http://jsfiddle.net/62SXu/
You can also change this to pass it the path to whatever your image is
does have to be done with CSS? it seems alot easier method to do with jQuery. something like this would work:
<style>
.button1 {background:url(url to PIC);}
</style>
$(document).ready(function (){
$(".onClick").click(function (){
var ID = $(this).attr("id");
$(body).removeClass();
$(body).addClass(ID);
})
})
<div class = "onClick" id="button1"> ... </div>
<div class = "onClick" id="button2"> ... </div>
<div class = "onClick" id="button3"> ... </div>
I have an iframe inside my main page. There is a modalpopup inside the iframe page. So when the modalpopup is shown, the parent of the modalpopup is the iframe body and the main page parent body. Thus the overlay only covers the iframe and not the entire page.
I tried moving the modalpopup from the iframe to the parent windows body element (or any other element inside the parents body) using jQuery. I am getting an invalid argument error.
How do I show a modalpopup from an page inside iframe and it should cover the entire document, parent document as well?
Update:
Since few users are interested in achieving the same behavior .. here is the workaround
The best workaround that I would suggest would be to have the modalpopup in the main page .. and then invoke it from the iframe .. say something like this ..
/* function in the main(parent) page */
var _onMyModalPopupHide = null;
function pageLoad(){
// would be called by ScriptManager when page loads
// add the callback that will be called when the modalpopup is closed
$find('MyModalPopupBehaviorID').add_hidden(onMyModalPopupHide);
}
// will be invoked from the iframe to show the popup
function ShowMyModalPopup(callback) {
_onMyModalPopupHide = callback;
$find('MyModalPopupBehaviorID').show();
}
/* this function would be called when the modal popup is closed */
function onMyModalPopupHide(){
if (typeof(_onMyModalPopupHide) === "function") {
// fire the callback function
_onMyModalPopupHide.call(this);
}
}
/* functions in the page loaded in the iframe */
function ShowPopup(){
if(typeof(window.parent.ShowMyModalPopup) === "function") {
window.parent.ShowMyModalPopup.apply(this, [OnPopupClosed]);
}
}
// will be invoked from the parent page .. after the popup is closed
function OnPopupClosed(){
// do something after the modal popup is closed
}
Hope it helps
If you're using the iframe simply for scrollable content you might consider a styled div with overflow: auto or scroll, instead.
A set up such as this makes it easier to modify the appearance of the entire page since you're not working with multiple documents that each essentially have their own window space inside the page. You can bypass some of the cross-frame communication and it may be easier to keep the information in sync if you need to do that.
This may not be suitable for all situations and may require ajax (or modifying the dom with javascript) to change the div contents instead of just loading a different document in the iframe. Also, some older mobile browsers such as Android Froyo builds don't handle scrollable divs well.
You answered your own question in your update. The modal dialog needs to live on the parent page and invoked from the iframe. Your only other option is to use a scrolling div instead of an iframe.
It is not possible the way you are asking. Think of it this way: an iframe is a seperate window. You cannot (for the time being) move a div in one webpage into another.
I have done this by writing a small code for jQuery see below maybe this can help :
NOTE: Make sure you are doing on same domain
HTML:
<button type="button" id="popup">Show Popup</button>
<br />
<br />
<iframe src="your url" style="width: 100%; height:400px;"></iframe>
JS:
// Author : Adeel Rizvi
// It's just a attempt to get the desire element inside the iframe show outside from iframe as a model popup window.
// As i don't have the access inside the iframe for now, so I'll grab the desire element from parent window.
(function () {
$.fn.toPopup = function () {
return this.each(function () {
// Create dynamic div and set its properties
var popUpDiv = $("<div />", {
class: "com_popup",
width: "100%",
height: window.innerHeight
});
// append all the html into newly created div
$(this).appendTo(popUpDiv);
// check if we are in iframe or not
if ($('body', window.parent.document).length !== 0) {
// get iframe parent window body element
var parentBody = $('body', window.parent.document);
// set height according to parent window body
popUpDiv.css("height", parentBody.height());
// add newly created div into parent window body
popUpDiv.appendTo(parentBody);
} else {
// if not inside iframe then add to current window body
popUpDiv.appendTo($('body'));
}
});
}
})();
$(function(){
$("#popup").click(function () {
// find element inside the iframe
var bodyDiv = $('iframe').contents().find('YourSelector');
if (bodyDiv.length !== 0) {
// Show
$(bodyDiv).toPopup();
} else {
alert('Sorry!, no element found');
}
});
});
CSS:
.com_popup {
background-color: Blue;
left: 0;
position: absolute;
top: 0;
z-index: 999999;
}