I am using the QuickFit library to resize some text on my website.
But the text is bigger than the div with the fixed size.
I need to avoid that.
I use it like that:
$(function() {
$(window).on('resize', function() {
$(".area_competences_text").quickfit({ max: 50, min: 10, truncate: false , tolerance: 0.08});
});
$(window).trigger('resize');
});
gives that result:
my HTML:
<div class ="cell cell2">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="area_competences_text text_software">
<div class="referencesProductHeader">
SOFTWARE- UND DATENBANKENTWICKLUNG <br>
</div>
<ul class="listStyle">
<li> Analyse der Geschäftsprozesse</li>
<li> Entwicklung von Lösungskonzepten und Priorisierung der Anforderungen</li>
<li> Entwicklung einer Client/Server Anwendung</li>
<li> Schwerpunkt: Logistikabwicklung im Umfeld einer Nicht-Serienfertigung</li>
<li> Rollout in Deutschland, Österreich, China und auf Baustellen weltweit</li>
<li> Projektbegleitende Beratung und Moderation</li>
<li> Wartung und Support international</li>
<li> Technologien: Client/Server, Webanwendung <br> und mobile Barcodescanner-Lösung</li>
</ul>
</div>
</td></tr></table>
</div>
Why is it overlapping its div with a fixed size?
width: 20 <-- You are saying to be 20 pixels wide. Remove it.
$(function() {
$(window).on('resize', function() {
$(".area_competences_text1").quickfit({
max: 50,
min: 10,
truncate: false,
tolerance: 0.08,
width: 20
});
$(".area_competences_text2").quickfit({
max: 50,
min: 10,
truncate: false,
tolerance: 0.08
});
});
$(window).trigger('resize');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgithub.com/chunksnbits/jquery-quickfit/master/jquery.quickfit.js"></script>
<div class="area_competences_text1">with Width</div>
<div class="area_competences_text2">without Width</div>
Related
I have two range sliders ( slider1, slider2). What I want: when the user starts sliding with mouse on the slider1 then the position( or width) and the value to be same on the slider2 as slider 1.
My current code :
<p>
<label for="amount">Distance</label>
<input type="text" id="amount">
</p>
<!--Range slider-->
<div class='col-xl-6 col-lg-6 col-md-6 col-xs-12' id='slide'>
</div>
<p>
<label for="amount2">Distance</label>
<input type="text" id="amount2">
</p>
<div class='col-xl-6 col-lg-6 col-md-6 col-xs-12' id='slide2'>
</div>
<script>
$( function() {
$( "#slide" ).slider({
range: 'min',
min: 0,
max: 5000,
value: 0,
});
$( function() {
$( "#slide2" ).slider({
range: 'min',
min: 0,
max: 5000,
value: 0,
})
});
</script>
I know that I have to use the slide event, but I cant change the position of the slide2, thanks in advance
You can use slide event this will get called when user slide the slider then use slider("value") to get value and finally set value to both slider.
Demo Code:
$(function() {
$("#slide").slider({
range: 'min',
min: 0,
max: 5000,
value: 0,
});
$("#slide2").slider({
range: 'min',
min: 0,
max: 5000,
value: 0
});
//on slide of slider call this
$(".slides").on("slide", function() {
var selection = $(this).slider("value"); //get value
$(".slides").slider("value", selection); //set that value in both
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
<label for="amount">Distance</label>
<input type="text" id="amount">
</p>
<!-- Range slider 1 -->
<div class="slides" id="slide"></div>
<p>
<label for="amount2">Distance</label>
<input type="text" id="amount2">
</p>
<!-- Range slider 2 -->
<div class="slides" id="slide2"></div>
I chose jQuery UI in my project. I had defined two dialogs(dialogDIV and dlgTrn). Both show and hide of dialogDIV works fine, and show of dlgTrn works fine also.
But hide of dlgTrn works fail. When closing it, it has no explode effect.
Here is my js code:
$(function(){
$("#dialogDIV").dialog({
autoOpen:false,
height:500,
width:800,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#dlgTrn").dialog({
autoOpen:false,
height:250,
width:400,
show: {
effect:"blind",
duration:1000
},
hide: {
effect:"explode",
duration:1000
}
});
$( "#tabs" ).tabs({
});
});
Here is my html code:
<div id="dialogDIV" class="DIV">
<div class="div1"></div>
<div id="tabs" class="div2">
<ul>
<li>a</li>
<li>b</li>
</ul>
<div id="tabs1" style="height:70%;"></div>
<div id="tabs2" style="height:70%;"></div>
</div>
</div>
<div id="dlgTrn" title="stTrn"></div>
It is very strange. Who can help me ?
Currently the owl-carousel that I have employed in my website is far too tall, as it takes up more than the full screen. From the demo on owl-carousel for one image per slide it appears that it is possible to adjust the height. I am using the latest version of owl carousel 2. I also tried wrapping the carousel in another div and adjusting the height of the outer div. I have noticed that I can adjust the width, which also has the effect of adjusting height. However, I would like to adjust the height without adjusting the width. I have attached my javascript and html. Thanks.
<body>
<div id="navigation">
<ul>
<li> <%= link_to "About", pages_about_path, id: "about-link"; %> </li>
<li> <%= link_to "Contact Us", pages_contact_us_path; %> </li>
</ul>
</div>
<div class="wrapper">
<h1><img src="http://cdn-0.famouslogos.us/images/computer-logos/ab-computer-repair-logo.jpg"> </h1>
<div id="carousel" class="owl-carousel owl-theme">
<div class="item"><img src="https://responsivedesign.is/__data/assets/image/0013/5017/Owl-Carousel-2.jpg"></div>
<div class="item"><img style="width:100%; height:auto;" src="http://www.pcgeeksusa.com/wp-content/uploads/2015/01/computer-repair.jpg"></div>
</div>
<div class="contact">
<aside>
<h2>Contact Info</h2>
<p> Nomadic Inc. <br>
Tuscaloosa, AL 35404 <br>
<b> E-mail: </b> nesella#comcast.net <br>
<b> Phone: </b> 205-799-1668
</p>
</aside>
</div>
</div>
</body>
And the javascript:
$ ->
$("#carousel").owlCarousel({
autoplay: true,
items: 1,
loop: true,
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
})
Add autoHeight:true it will set the height of the carousel to auto.
See below the correct code
$("#carousel").owlCarousel({
autoplay: true,
items: 1,
loop: true,
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
autoHeight:true
})
The owl carousel normally has a different height according to the images placed in the carousel. To create an height that won't change you can use
autoHeight: true
This changes the height of the carousel according to the biggest image or item inside the carousel. So the plan is to calculate all visible items and change height according to heighest item. Your full JS code would be as follows:
$("#carousel").owlCarousel({
autoplay: true,
items: 1,
loop: true,
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
autoHeight:true
})
I'm using flexslider for some carousels, everything works fine. Due to where I need to position the navigation for the carousel, I decided specifying custom navigation would be the best approach. Again, this works fine. This is the code I'm using:
$(window).load(function() {
$('.carousel').flexslider({
animation: "slide",
customDirectionNav: $(".nav-carousel a"),
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 220,
itemMargin: 10,
minItems: 1,
maxItems: 5
});
});
The HTML (just with 1 item for demonstration purposes):
<div class="box">
<header class="header">
<h2>Similar products</h2>
<p>other customers have purchased</p>
<div class="nav-carousel">
<span>Prev</span>
<span>Next</span>
</div>
</header>
<div class="carousel">
<ul class="products slides">
<li class="h-product">
<a href="#" title="TITLE TEXT" class="inner">
<img src="img/temp/products/thumbs/1.jpg" alt="ALT TEXT" class="u-photo" />
<h2 class="p-name">Product title</h2>
<p class="e-description">Product description</p>
<data class="p-rating" value="4">Rating: 4 out of 5</data>
<p class="value"><del>£7.99</del> <data class="p-price" value="6.95">£6.95</data></p>
</a>
</li>
</ul>
</div>
</div>
The issue occurs where I have multiple carousels on the same page. I can see the script is just looking for a div with a class of .nav-carousel, obviously if there is more than 1 it's getting confused and breaking.
I don't want to duplicate the script for a .carousel-2 or even .carousel-3. Although I can't imagine there ever being more than that I'd prefer it to be 'scalable' just incase.
I imagine I'd need to use/specify a parent div then make sure that the .nav-carousel that's targeted is descendant of that div so it only effects the relative child carousel? I tried this with the code I've included in the post but without joy.
Moving the <header> within the .carousel div doesn't seem to break anything in terms of the carousel layout/movement but that alone doesn't fix the navigation.
Hope someone can help with this.
I can't take credit for this, Shikkediel over at css-tricks pointed out the error of my ways. Using a loop worked, here's a working multi-carousel CodePen example:
http://codepen.io/anon/pen/xZGzzN?editors=001
Here's the script:
$(window).on('load', function() {
$('.carousel').each(function() {
$(this).flexslider({
animation: 'slide',
customDirectionNav: $(this).find('.nav-carousel a'),
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 250,
itemMargin: 0,
minItems: 1,
maxItems: 5
});
});
});
For this to work, the navigation .nav-carousel, has to be within the .carousel container.
Hope this is useful for someone else!
I use list_carousel slider to run posts with HTML like that :
<div class="list_carousel">
<div id='gallary'>
<ul id='foo3'>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
I use document.write, slider run ok.
<div class="list_carousel">
<div id='gallary'>
<script>
document.write('<ul id="foo3">');
document.write('<li>A</li>');
document.write('<li>B</li>');
document.write('<li>C</li>');
document.write('<ul>');
</script>
</div>
</div>
But when I use innerHTML, slider does not run :
<div class="list_carousel">
<div id="gallary">
</div>
document.getElementById('gallary').innerHTML = " <ul id='foo3'>..... </ul>";
</div>
Slider run with call :
<script>
$("#foo3").carouFredSel({
auto: false,
responsive: true,
scroll: 1,
mousewheel: true,
items: {
visible: 3,
width: 200
}
});
</script>
Say me reason why and solution for this.