jquery bookshelf Slider modifications - javascript

I am creating book shelf using jquery bookshelf Slider. Its Working good but i need some modifications in my book self.
Our Book self demo link
Book shelf demo
Our modifications are given below :
Default load time title and icons are hide.
if we need to click title or icons. show the title or icon.
Our Script is given below
<script type="text/javascript">
jQuery(document).ready(function() {
//define custom parameters
$.bookshelfSlider('#bookshelf_slider', {
'item_width': '100%', //responsive design > resize window to see working
'item_height': 320,
'products_box_margin_left': 30,
'product_title_textcolor': '#ffffff',
'product_title_bgcolor': '#c33b4e',
'product_margin': 20,
'product_show_title': true,
'show_title_in_popup': true,
'show_selected_title': true,
'show_icons': true,
'buttons_margin': 15,
'buttons_align': 'center', // left, center, right
'slide_duration': 800,
'slide_easing': 'easeOutQuart',
'arrow_duration': 800,
'arrow_easing': 'easeInOutQuart',
'video_width_height': [500,290],
'iframe_width_height': [500,330]
}
);
});//ready
</script>
We are already try to change the 'product_show_title': true, to
'product_show_title': false,
But its not working for me. so please advise..

Set the opacity of the title and icons properly after plugin initialization.
//define custom parameters
$.bookshelfSlider('#bookshelf_slider', {
'item_width': 605,
'item_height': 720,
'products_box_margin_left': 30,
'product_title_textcolor': '#ffffff',
'product_title_bgcolor': '#c33b4e',
'product_margin': 30,
'product_show_title': true,
'show_title_in_popup': true,
'show_selected_title': true,
'show_icons': true,
'buttons_margin': 15,
'buttons_align': 'center', // left, center, right
'slide_duration': 800,
'slide_easing': 'easeInOutExpo',
'arrow_duration': 800,
'arrow_easing': 'easeInOutExpo',
'video_width_height': [600,600],
'iframe_width_height': [600,600]
}
);
$(".show_hide_titles, .show_hide_icons").css('opacity','0.5');
$(".product_title, .icons_sprite").css('opacity','0');
DEMO

Related

Cytoscape - graph entire screen

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.

how to make Scroll like this with text fill in scroll

( http://clapat.ro/themes/hervin-wordpress/ )
i have done scroll effect with more error like this
var swiper = new Swiper(".swiper-container", {
pagination: ".swiper-pagination",
direction: "vertical",
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
effect: "coverflow",
coverflowEffect: {
rotate: 5,
slideShadows: true,
modifier: 0,
stretch: 10,
depth: 300,
},
mousewheel: {
releaseOnEdges: true,
sensitivity: 50,
},
observer: true,
observeParents: true,
parallax: true,
speed: 600,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
and result same here
https://swiperjs.com/demos/270-mousewheel-control.html
Now I need any idea to fill in the text in the scroll like link above
you probably don't need Swiper for this
this effect can be achieved by some parallax techniques
you may need some 3rd party library to make your life easier
if you are using react you may use FramerMotion or spring
if you are using vanilla javascript you can find dozens of parallax scrolling libraries you may check this one

Tippy.js not displaying content from the data attribute?

I've installed tippy.js to handle my tooltips, however I am struggling to get the tooltips to display the content set from the data attribute. My default tooltip is working fine, however when I initialise by a class, to be able to add a different style to the tooltip, it doesn't get the content from the tooltip.
tippy.setDefaults({
animation: 'scale',
animateFill: false,
maxWidth: 240,
duration: 0,
arrow: false,
})
tippy('.js-tippy-reviews', {
theme: 'reviews',
animation: 'scale',
animateFill: false,
maxWidth: 240,
duration: 0,
arrow: false,
})
If I add the content method to tippy it will display, however since the content of the tooltip is dynamic, i need to set it on the data attribute. I am unsure how to pass the data attribute from the element into tippy.
content: this.dataset.tippy
Any ideas what I'm doing wrong?
HTML:
<div class="js-tippy-reviews reviews-notification" data-tippy="2 Pending Reviews"></div>
You could add the onShow() function and read it from the instance and set the content from the reference dataset.
tippy.setDefaults({
animation: 'scale',
animateFill: false,
maxWidth: 240,
duration: 0,
arrow: false,
});
tippy('.js-tippy-reviews', {
theme: 'reviews',
animation: 'scale',
animateFill: false,
maxWidth: 240,
duration: 0,
arrow: false,
onShow(instance) {
instance.popper.hidden = instance.reference.dataset.tippy ? false : true;
instance.setContent(instance.reference.dataset.tippy);
}
});
$(document).ready(function(){
$("#btn-change-data").click(function()
{
$(".js-tippy-reviews").attr("data-tippy",$("#test-input").val());
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js#1"></script>
<script src="https://unpkg.com/tippy.js#4"></script>
<div class="js-tippy-reviews reviews-notification" data-tippy="test">CONTENT</div>
<input type="text" id="test-input" />
<button id="btn-change-data">Change data-tippy</button>
This solution works
tippy('.js-tippy-reviews', {
content: (reference) => reference.dataset.tippy,
})

How to center the text in the middle of donut hole pie chart?

I want to create a donut hole pie chart to represent my data.
I came across this site : http://rendro.github.io/easy-pie-chart/ .
I follow their instruction all the way toward the end. I am close to get it working, but I don't know how to center the text in the middle of my pie chart.
Can someone help me with that ?
This is what I have so far.
<div class="chart_1" data-percent="90" >
<span>6</span>
</div>
<script type="text/javascript">
$(function() {
$('.chart_1').easyPieChart({
//Configuration goes here
easing: 'easeOutElastic',
delay: 3000,
barColor: '62ae41',
scaleColor: false,
lineWidth: 10,
trackWidth: 10,
animate: false,
lineCap: 'square',
});
});
</script>
Here is my result...
I was able to get it centered just with a slight modification:
added a "#" to the barColor
removed a trailing comma
$(function() {
$('.chart_1').easyPieChart({
//Configuration goes here
easing: 'easeOutElastic',
delay: 3000,
barColor: '#62ae41',
scaleColor: false,
lineWidth: 10,
trackWidth: 10,
animate: false,
lineCap: 'square'
});
});
http://jsfiddle.net/imamathwiz/gu3aL84e/

carouFredsel Responsive carousel with items:variable

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);

Categories