I'm working with a responsive site with a SkelJS framework. Overall, I'm happy with the site, but I'm having an issue widening a jquery slideshow on the home page for wide monitors. It looks fine on mobile, tablet and my laptop screen, but when I push it over to my large monitor, I don't like the space between the left and right of the slide show and the edge of the screen.
The config.js file is setup as follows:
window._skel_config = {
prefix: 'css/style',
resetCSS: true,
boxModel: 'border',
grid: {
gutters: 50
},
breakpoints: {
'mobile': {
range: '-480',
lockViewport: true,
containers: 'fluid',
grid: {
collapse: true,
gutters: 10
}
},
'desktop': {
range: '481-',
containers: 1200
},
'1000px': {
range: '481-1200',
containers: 960
}
}
};
I'm learning the js side as I go, so if anyone wanted to give me a layman's response, I'd be sincerely grateful.
I'm trying to understand why the "desktop" breakpoint would range from '481-_' and have a container size of 1200 and the "1000px" breakpoint would go from '481-1200' with a 960 container.
I've played around with adjusting the '1000px' parameters to include larger sizes (up to 1900) and adjusting the container size, but it destroys all of my CSS formatting.
The site in question is www.rmcabinetry.com.
Thanks in advance for any help!!! This community has been an awesome resource. I'm trying not to abuse it.
Per their docs,
"Note: Since breakpoint ranges are allowed to overlap, more than one can be active at any given time. When this happens, the options of each are combined in order with those defined last taking precedence."
This would suggest the containers will equal 1200 if the screen width is 481 and above but not when it is lower than 1200.
In the template you are using from HTML5UP, the slideshow is wrapped in a parentDiv which has a banner background image that is scaling to avoid the gaps on the left and right.
Your settings look a little muddled. Try adjusting them so that your defaults come first (i.e. are loaded first, which is why "range: '*'," is first below) and are followed by breakpoints breaking down the range that will then override them (via order of precedence). Also, state ranges as shown below, with the - before the number (I think this will solve your problem). I would also vary your gutters and change them across ranges for better effects. Try these:
{
prefix: 'css/style',
resetCSS: true,
boxModel: 'border',
containers: 1200,
useOrientation: true,
breakpoints: {
'widest': { range: '*', containers: 1360, grid: { gutters: 50 }, hasStyleSheet: false },
'wide': { range: '-1680', containers: 1200, grid: { gutters: 40 } },
'normal': { range: '-1280', containers: 960, grid: { gutters: 30 }, lockViewport: true },
'narrow': { range: '-1000', containers: '100%', grid: { gutters: 25, collapse: true }, lockViewport: true },
'mobile': { range: '-640', containers: '100%', grid: { gutters: 10, collapse: true }, lockViewport: true }
}
You then need to make a css page for each of these breakpoints (except 'widest', as stated above) to adjust their individual styles (i.e. 'css/style-wide.css', 'css/style-normal.css', 'css/style-narrow.css', 'css/style-mobile.css'). The prefix setting will find them so long as you link them via 'css/style' as the beginning part of your link href. Adjusting styles in these sheets will only affect the style at the size you desire, giving you the freedom to make the adjustments you seek.
Related
i need to render graphs and i want to use cytoscape (plotly dash cytoscape).
Because with the plotly dash wrapper it is possible to write everything in python and i don't need to split my (small) application into a backend and a frontend part.
I want that the graph uses the entire screen and orders the nodes in a good and readable way.
Unfortunately i don't find a description of all possible parameters in the api documentation.
Instead of the rendering in picture i would like to have it in way.
Do you have any idea how to solve this?
The graph has the entire space available, i can move it with my mouse everwhere i want.
These are my current properties:
cyto.Cytoscape(
id='knowledge-graph',
layout={
'name': 'cose',
'idealEdgeLength': 1000,
'nodeOverlap': 500,
'refresh': 20,
'fit': True,
'padding': 30,
'randomize': False,
'componentSpacing': 1000,
'nodeRepulsion': 400000,
'nestingFactor': 5,
'gravity': 800,
'numIter': 1000,
'initialTemp': 200,
'coolingFactor': 0.95,
'minTemp': 1.0
},
style={
"width": "100%",
"height": "calc(100vh - 150px)",
},
stylesheet=[
{'selector': 'edge', 'style': {'label': 'data(label)', 'curve-style': 'haystack',
'haystack-radius': 0,
'width': 5,
'opacity': 0.5,
'line-color': '#a8eae5'}, 'text-wrap': 'wrap'},
{'selector': 'node', 'style': {'label': 'data(label)', 'background-color': '#30c9bc'}, 'text-wrap': 'wrap'},
]
)
Thank you!
You can try using cytoscape-spread layout which first applies a force-directed layout for initial positions and then uses voronoi-based method to spread the nodes in the remaining space. You can check its demos here and here.
I have got two queries, I am implementing tsParticles in my React application.
First one:.
<Particles
id="tsparticles"
options={{
background: {
color: {
value: "black",
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "window",
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "trail",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color:{
animation:{
enable:true,
speed:50,
},
value:"#f00"
},
links: {
shadow:{
blur:true,
color:"#00ff00"
},
triangles:{
frequency: 1
},
color: "random",
distance: 150,
enable: true,
frequency:1,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
angle:{
offset: 45,
value: 90
},
attract:{
rotate:{
x:3000,
y:3000
}
},
gravity:{
acceleration: 9.81,
enable:false,
maxSpeed:1
},
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
value_area: 1000,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
}}
/>
There is a section of onHover and key value of mode in it. There are like 8 different modes to it, can be viewed in https://particles.matteobruni.it/ .
All other modes work fine but the trail mode when I use this code, am I missing some other properties to the Particles component?
Second one:
Also,
I have got two divs, one for the particle and the other for the text to display on top of it. I have achieved this using z-index and positions.
I need the canvas height to be dynamic that is occupy 100% height of its parent whatever the screen size is. I have tried doing this by including Particles component inside a div and keeping its height to 100% but the canvas height decreases with the decrease in the screen size.
Kindly help me, thank you :)
Wow, there's a lot to answer here, but I try to do my best.
First point, the config and mouse trail
The mouse trail needs more configuration, in the modes section of interactivity you have to configure the trail section.
You can see a sample here: https://codepen.io/matteobruni/pen/abdpbBY
If you need more documentation checkout the right section in documentation: https://particles.js.org/interfaces/_options_interfaces_interactivity_modes_itrail_.itrail.html
Second point, the canvas size
If you need a dynamic canvas size the best solution is to use the backgroundMode in the options root object
You can see a sample here: https://codepen.io/matteobruni/pen/MWeqxNL
The background mode if enabled sets the canvas style with a fixed position and the desired zIndex
You can see the documentation here: https://particles.js.org/interfaces/_options_interfaces_backgroundmode_ibackgroundmode_.ibackgroundmode.html
If you are using the backgroundMode, the better results are obtained without setting any style to the containing div (the tsParticles target/container)
I am trying to make a carouFredsel responsive carousel that should show a variable amount of elements depending on how many fit in the width. The problem I have is that whenever I set responsive to true, the elements get a 100% with and this is not what I need.
I managed to create a fiddle where I show:
1) a carousel with a 100% width that shows as many elements as they fit and when the browser window gets resized, more or less elements are shown
2) an item image that gets resized according to the size of the screen
I would like to combine 1 and 2 and have a carousel that behaves like 1 with elements that behave like 2.
It is not possible for me to know in advance how many items would fit (not even in percentage) since for each carousel the elements may have any width (though all of them have the same).
Is this possible ? What am I missing ?
http://jsfiddle.net/379zW/2/
var options = {
circular: true,
infinite: false,
auto : false,
responsive: false,
prev : {
button : "#p",
key : "left"
},
next : {
button : "#n",
key : "right"
},
width: '100%',
};
$("#carousel_123").carouFredSel(options);
This might solve your problem:
var options = {
circular: true,
infinite: false,
auto: false,
items: {
width: '100%',
height: 'variable',
visible: {
min: 1,
max: 999
}
},
responsive: false,
prev: {
button: "#p",
key: "left"
},
next: {
button: "#n",
key: "right"
},
width: '100%',
};
$("#carousel_123").carouFredSel(options);
So I have been searching everywhere for the past week but I cant find a way to get two "Ext.TabPanel to scroll together.
I am making this page to have Ext.Panel which has two items :
var MyBorderPanel = new Ext.Panel({
layout: 'border',
renderTo: 'command_display',
cls: 'auto-width-tab-strip',
height:800,
items: [
{
region: 'west',
title: 'item1: <?=ui::getURLField("item1")?>',
split: true,
width: 500,
minSize: 100,
maxSize: 900,
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel
baseTab
},
{
region: 'center',
title: 'item2 : <?=ui::getURLField("item2")?>',
split: true,
margins: '0 0 0 0',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel
compareTab
}
]
});
These items : baseTab and compareTab are described like :
var baseTab = new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 0, // second tab initially active
items: [
<?php
$uihelper->perform("InitItem1Iteration");
$comma = true;
while($uihelper->hasNext("Item1Iteration"))
{
$uihelper->next("Item1Iteration");
?>
<?=(!$comma?",":"")?>
{
title: 'some php code',
id: 'some php code',
autoScroll: true,
contentEl: 'some php code',
}
<?php
$comma = false;
} ?>
]
});
Similar is the Item2.
Now basically what I want is. that these two tab panels have sroll bars, so I want that whenever I scroll one tabPanel, the other tab panel automatically scrolls along with it.
Is it even possible?
Thanks
Andy
Short answer, should be...
You need to access the scroller item of the specific container that you are interested in.
I would start investigating with something in the line of:
listeners: {
scroller: {
scroll: function(scroller, offset) {
console.log(scroller, offset);
}
}
}
I know that containers have scrollers defined, but I do not think that the tabpanel does. So this kind of listener would have to be added to every item (or the item could bubble the event, untested though).
(and of course, once you can capture the scroll event setting the other panel to the same offset shouldn't prove difficult)
Hope that this at least gives you a direction to move in.
You want to be looking at the scroller, as mentioned by #zelexir. Here is a fiddle with my example code http://jsfiddle.net/YgTuc/1/ This is for two panels, but should work just the same for panels in a TabPanel.
I am using ExtJs.
Is there any way to adjust the width of the Ext.Window according to its items?
Height is automatically adjusted to 'auto' but width:'auto' expands it to full browser window.
var childPnl1 = { // 1
frame: true,
width: 350,
height: 50,
html: 'My First Child Panel',
title: 'First children are fun'
}
var childPnl2 = { // 2
width: 150,
html: 'Second child',
title: 'Second children have all the fun!'
}
new Ext.Window({
renderTo: Ext.getBody(),
items: [
childPnl1,
childPnl2,
{
title: '3rd',
width: 400, //Maximum
height: '150',
frame: true
}
]
});
Now I need a way so that the window adjusts its width to 400.
One way can be to iterate all the panels and then get the right most edge, but I want to avoid that.
Ofcourse it will expand to full browser window, why don't you use common variable for your
item-width and window-width? Also, it will give you guarantee that your window size neither be large or small than your item-width. Sometimes in different cases, autoWidth behaves different. So it is preferable to use manual width.