Override the Names of bxSlider Custom pre next Button with Glyphicons? - javascript

I want to override the bx slider prev, next with glyphicons chevron left and right. How can I get on that one?
Here is Code :
<div class="bx-controls-direction">
<a class="bx-prev" href="">Prev</a>
<a class="bx-next" href="">Next</a></div>
How can I replace the prev and next with the below span code in bx slider?
<span class="glyphicon glyphicon-chevron-left orange"></span>
<span class="glyphicon glyphicon-chevron-Right orange"></span>

bxSlider provides a nextText and prevText option to change the text of the controls. https://github.com/stevenwanderski/bxslider-4#user-content-controls
It should be possible to write your icon html direct into the option as the string will be directly added on slider creation:
https://github.com/stevenwanderski/bxslider-4/blob/master/src/js/jquery.bxslider.js#L665
$(document).ready(function(){
$('.bxslider').bxSlider({
prevText: '<span class="glyphicon glyphicon-chevron-left orange"></span>',
nextText: '<span class="glyphicon glyphicon-chevron-right orange"></span>'
});
});
hope that helps!

Related

Place JS Variable in my modal's HREF link

I have a JS variable showing properly in an alert window. I am trying to place the same value in my href link on the modal that immediately follows the alert.
On the main page I have a script that shows the value in an alert box - It gets the clicked_id value from here:
<span onclick='executeChildSupport(this.id)'><a href='#' data-toggle='modal'><i class='fa fa-th' aria-hidden='true'></i></a></span>
This is the JS script that catches the clicked_id and shows in the alert box
function executeChildSupport(clicked_id) {
$(this).tooltip('hide');
event.currentTarget.innerHTML = "<i class='fa fa-th' aria-hidden='true' style='margin-left:10px'></i>";
alert(clicked_id);
$('#supportShare').modal('show');
return false
}
Following the alert, a modal is then shown, I am trying to place the "clicked_id" JS variable that was shown in the alert also in the modal's page where there is an HREF string as shown below (where it says "document.write(clicked_id)")
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i><br>LINK HERE <script>document.write(clicked_id);</script>
Any suggestions?
HERE IS THE MODAL CODE (BODY AREA ONLY - I believe that is all that is needed by the request)
<div class="modal-body" style="padding: 40px;color:#fff">
<table border="0" style="width:100%">
<tr>
<td colspan="3" style="padding:8px 3px 3px 2px">
<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary" style="background-color:#171717;width:100%;border:none;padding:30px">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i><br>LINK <script>document.write(+clicked_id+);</script></a>
</td>
</tr>
</table>
</div>
What about this direction?
LINK
If I've understood your query then you can follow two ways,
(all codes below are not absolute working code, these are given for understanding, you may want to change them as you want)
not-recommended way is to use a global variable then using it in your link
example:
var current_id = null;
......
alert(clicked_id);
current_id = clicked_id;
....
Then doing
<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i>
<br>
LINK HERE
<script>document.write(current_id);</script>
</a>
Recommended Way is to access and change the value of the dom after alert
example:
......
alert(clicked_id);
$('#clicked_id').text(clicked_id);
$('#dynamic_link').attr('href', '../_support/tip.php?id='+clicked_id);
$('#supportShare').modal('show');
.....
or you can use a callback after the modal loads
......
alert(clicked_id);
$('#supportShare').modal('show', function(){
$('#clicked_id').text(clicked_id);
$('#dynamic_link').attr('href', '../_support/tip.php?id='+clicked_id);
});
.....
Then changing a bit like:
<a href="#" target="_blank" class="btn btn-primary" id="dynamic_link">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i>
<br>
LINK HERE
<span id="clicked_id"></span>
</a>

How to make the content text "rtl" in popover button via bootstrap

I have a pop hover button. I want to make it's text RTL. How can I do it?
<button
type = "button"
class = "btn btn-success btn-xs pop"
data-container = "body"
data-toggle = "popover"
data-placement = "right"
data-content = "hello world"
data-original-title = ""
title = "">help</button>
add:
style="direction:rtl;"
<button type="button" class="btn btn-success btn-xs pop" data-container="body" data-toggle="popover" data-placement="right" data-content="hello world"
data-original-title="" title="" style="direction:rtl;" >
A paragraph with a right-to-left direction:
<p dir="rtl">Write this text right-to-left!</p>
For your case, and as documented on bootstrap, you have the option to change the popover tempate via the attribute data-template
<div class="popover" role="tooltip" direction="rtl">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
In your code, add this attribute and set the direction to rtl both in title and body
<button data-template='<div class="popover" role="tooltip" dir="rtl"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' ...>
Help
<button>
HTML rtl attribute
bootstrap popovers
try using css, like so
.your-class-name{
direction: rtl;
}
Read the complete reference here
To all folks ending up here, in order to change direction or style text inside bootstrap's tooltip you can enable the HTML rendering inside tooltip using data-html="true" and then adding preferred HTML tags and attributes. Checkout example below:
Step 1 - Displaying plain text in tooltip:
<i class="bi bi-x-circle" data-toggle="tooltip" data-placement="top" title="name=درود"></i>
Step 2 - Creating the desired HTML to show in the tooltip:
<p dir='rtl'><strong>name<strong>=درود</p>
Step 3 - Displaying text with direction and bold style:
<i class="bi bi-x-circle" data-toggle="tooltip" data-html="true" data-placement="top" title="<p dir='ltr'><strong>name<strong>=درود</p>"></i>
- There are also other possible solutions such as editing the CSS class of popover or tooltip, such as this link.

elevateZoom on BSCarousel bug

I have developed a bootstrap carousel with a elevateZoom lens inside it. The issue is that when the mouse leaves the image, the lens does not disappear until the mouse leaves the lens too. In the example shown in official elevateZoom web this does not happen(the lens disappear as soon as the mouse leaves the image).
Here is my code:
<div id="planos" class="carousel slide" style="border-top:1px solid #FCF3E8; top:-1px" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" ng-app="planos-module" ng-controller="planos-controller">
<div ng-repeat="i in getNumber(number) track by $index" class="item" id="plano{{$index+1}}">
<img ng-src="img/planos/{{$index+1}}.jpg" alt="Plano {{$index+1}}" data-zoom-image="img/planos/{{$index+1}}.jpg" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control carousel-control-2" href="#planos" role="button" data-slide="prev">
<span class="fa fa-angle-left fa-3x" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control carousel-control-2" href="#planos" role="button" data-slide="next">
<span class="fa fa-angle-right fa-3x" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
And the relevant javascript:
$(document).ready(function(){
//some code
$('#plano1').addClass('active');
$('#planos .item img').each(function(){
$(this).elevateZoom({
zoomType : "lens",
lensShape : "round",
lensSize : 350
});
});
//some more code
});
What am I doing wrong?
Thank you very much
EDIT: Here is the JSFiddle. I wasn't able to replicate it exactly as my web, but the same issue is going on. Also, I couldn't import the elevateZoom js file, so I just copy-pasted its content in the js fiddle (if you scroll down in the JS section you can see my code)
EDIT2: SOLVED! The answer is below.
Solved!
Here is the answer, in case anyone else experiences the same issue.
I just had to add containLensZoom: true option to my elevateZoom initialization.
$(document).ready(function(){
//some code
$('#plano1').addClass('active');
$('#planos .item img').each(function(){
$(this).elevateZoom({
zoomType : "lens",
lensShape : "round",
lensSize : 350,
containLensZoom : true
});
});
//some more code
});

Reset class when "unhovering" item

I got my first star-rating up and running, however, I am missing a single-part.
My HTML looks like this:
<div class="rating">
<a class="star-link" href="/vote?hack=3&rating=1">
<span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="1" id="3-star-1"></span>
</a>
<a class="star-link" href="/vote?hack=3&rating=2">
<span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="2" id="3-star-2"></span>
</a>
<a class="star-link" href="/vote?hack=3&rating=3">
<span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="3" id="3-star-3"></span>
</a>
<a class="star-link" href="/vote?hack=3&rating=4">
<span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="4" id="3-star-4"></span>
</a>
<a class="star-link" href="/vote?hack=3&rating=5">
<span class="glyphicon glyphicon-star-empty star inline" data-hack="3" data-rating="5" id="3-star-5"></span>
</a>
</div>
Here's my Javascript:
javascript:
$('span.star').hover(function() {
hack_id = this.dataset.hack;
rating = this.dataset.rating;
for (i = 1; i <= 5; i++) {
if (i <= rating) {
$('#' + hack_id + '-star-' + i).addClass('star-active');
} else {
$('#' + hack_id + '-star-' + i).removeClass('star-active');
}
}
});
Now, when I hover over the star(s) it applies the class just fine and also removes the class of those stars that are not needed.
My last problem though is that once the class(es) were applied and I move my mouse somewhere else, it does not undo the changes.
I pretty much need some kind of:
if (not hovering over any star)
remove all classes set before
endif
I know this is a very basic task but I can not seem to get through it.
Thank you all in advance!
you can use jquery's mouseout(): http://api.jquery.com/mouseout/
also, instead of using jquery to apply classes you can simply define in your css
.star-active:hover{
/*whatever you have in .start-active now*/
}
then you won't need any jquery/js for this

How to give hover effect for the star code when selected? [duplicate]

This question already has answers here:
How to use bootstrap icons like star to give the star rating?
(2 answers)
Closed 8 years ago.
I am trying to implement the star-rating, and i am using the bootstrap icons features and I am using the star icons for this from bootstrap. I am able to get all the features of a star rating but i am not getting the hover effect for the previous siblings.
For example: if i hover to star4 then it should make the color of star1,2,3 to some color. but i am unable to get that feature.
My code is :
<span class="glyphicon glyphicon-star star1" id="q6-1" value="1"></span>
<span class="glyphicon glyphicon-star star1" id="q6-2" value="2"></span>
<span class="glyphicon glyphicon-star star1" id="q6-3" value="3"></span>
<span class="glyphicon glyphicon-star star1" id="q6-4" value="4"></span>
<span class="glyphicon glyphicon-star star1" id="q6-5" value="5"></span>
Jquery Is:
$('.star1').click(function(){
var rating = $(this).attr('id');
var res = rating.split("-");
rating = res[1];
for(var i=0;i<5;i++){
if(i<=rating){
$('#q6-'+i).addClass("color-star");
}
}
alert(rating);
});
$('.star1').hover(function(){
$(this).addClass("color-star");
}, function() {
$(this).removeClass("color-star");
});
CSS Implementation
HTML
<div class='rating'>
<span class="glyphicon glyphicon-star star1" id="q6-1" value="1"></span>
<span class="glyphicon glyphicon-star star1" id="q6-2" value="2"></span>
<span class="glyphicon glyphicon-star star1" id="q6-3" value="3"></span>
<span class="glyphicon glyphicon-star star1" id="q6-4" value="4"></span>
<span class="glyphicon glyphicon-star star1" id="q6-5" value="5"></span>
</div>
CSS
.rating{
float:left;
}
.star1{
float:right;
}
.star1:hover, .star1:hover ~ .star1{
color:gold;
}
jQuery Implementation
$('.star1').hover(function(){
$(this).css('color', 'gold').prevAll('.star1').css('color', 'gold');
}, function() {
$(this).css('color', 'black').prevAll('.star1').css('color', 'black');
});
Or, using your code:
$('.star1').hover(function(){
$(this).addClass("color-star").prevAll('.star1').addClass("color-star");
}, function() {
$(this).removeClass("color-star").prevAll('.star1').removeClass("color-star");
});

Categories

Resources