When I try to strech row in the row settings in Visual Composer, the row streches, but the position of the row is all wrong.
It happens only when body direction has direction:rtl css setting.
Website is online: http://ono.devurl.net/?page_id=871
Any way of fixing that?
Yuval.
Yuval Hey !
Try this script to fix your problem.
if( jQuery('html').attr('dir') == 'rtl' ){
jQuery('[data-vc-full-width="true"]').each( function(i,v){
jQuery(this).css('right' , jQuery(this).css('left') ).css( 'left' , 'auto');
});
}
Put this script code in jQuery(window).load.
hope this'll help you :)
Could be easier to resolve it with css, and it will work when page is resized too.
Find a class for row before [data-vc-full-width="true"] and add such css to your rtl.css
.before-fullwidth-row {
direction: ltr;
}
.before-fullwidth-row > div {
direction: rtl;
}
Seems to work...
If you want to fix VC Row also on window resize use this solution:
$(window).on( 'resize', function() {
$( '.rtl [data-vc-full-width="true"]' ).each( function(){
$( this ).css( 'right' , $( this ).css( 'left' ) ).css( 'left' , 'auto' );
});
}).resize();
WordPress Visual Composer full width row ( stretche row ) fix for RTL
jQuery(document).ready(function() {
function bs_fix_vc_full_width_row(){
var $elements = jQuery('[data-vc-full-width="true"]');
jQuery.each($elements, function () {
var $el = jQuery(this);
$el.css('right', $el.css('left')).css('left', '');
});
}
// Fixes rows in RTL
jQuery(document).on('vc-full-width-row', function () {
bs_fix_vc_full_width_row();
});
// Run one time because it was not firing in Mac/Firefox and Windows/Edge some times
bs_fix_vc_full_width_row();
});
Source
Related
I have a div with fixed height
<div style="height:300px; overflow-y:scroll">
<div class="selectable_div">
....
</div>
</div>
And I init selectable like this:
$( ".selectable_div" ).selectable({
But when I select content in .selectable_div scroll gets blocked and div is not scrolling. I want it to scroll while selecting on mouse wheel and when I just select and hold selection and move mouse down.
What do I do?
I found a plugin but don't want really to use 3d party plugins cause they might break something
UPD : the entire snippet if u ask(it very big, so I don't think it will help)
$( ".selectable_wrap" ).selectable({
filter: ".word_item",
cancel: '.cancel_selection',
stop: function(){
self.words.filter(x => x.selected).forEach(function(w){
w.selected = false
})
self.words_ids=[]
// alert($( ".ui-selected.word_item").size())
$( ".ui-selected.word_item", this ).each(function() {
let word_index = $(this).attr('data-count')
word = self.words[word_index]
word.selected = true
self.words_ids.push(word.id)
});
self.get_phrases_by_words(JSON.stringify(self.words_ids))
},
}).disableSelection();
I am stuck up with a problem and that is annoying me. I hope someone can help me on this.
Please imagine I have a Icon called Communication. On click of that Icon, I should get a tooltip (should kept open until I click outside or on the same Communication Icon)
So the tooltip should contain few other icons like Phone, Email, In Person Icons and I should be able to drag and drop them in another div element.
Note that the Icons from the Communication's Tooltip should not be deleted.
Below is the sample, that I have found and modified a bit.
$(function() {
$( document ).tooltip({
items: "input",
content: function() {
return $('.myPopover').html();
},
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
$('.fireTip').click(function () {
if(!$(this).hasClass('open')) {
$('#age').trigger('mouseover');
$(this).addClass('open');
} else {
$('#age').trigger('mouseout');
$(this).removeClass('open');
}
})
});
http://jsfiddle.net/AK7pv/961/
I am actually expecting similar to this example, but instead of the list tags, I want the Icons to be arranged in series and it should be drag-gable to other div elements.
Please assist me, whether this is possible or not. We can use Jquery, Javascript, Kendo UI to do this.
Because I am using variable color for buttons, I need to add it with inline css. The hover color is other variable. I cant add hover selector on inline css so, I must use js. I have try to do it with .hover() but when I hover the button both colors desappear.
The code:
$('.btn').hover( function() {
var $hover = $('.btn').attr('data-hover');
$(this).css( "background", $hover );
}, function() {
var $color = $('.btn').attr('data-color');
$(this).css( "background", $color );
});
HTML:
<button class="btn wpb_btn-small" style="background:#00aff0;" data-color="#00aff0" data-hover="#0cbbfc">Button</button>
$('.btn').hover( function() {
var $hover = $(this).attr('data-hover'); // <-- change to this , there are many .btn
$(this).css({ "background-color" : $hover }); // minor change
}, function() {
var $color = $(this).attr('data-color'); // same change
$(this).css({ "background-color" : $color }); // minor change here
});
$('.btn') is returning an array - if there are more then one on the page , use $(this)
they both should be "background-color" or "background" , make sure you use the last edit where I made them the same
you could even get really crazy and put it all in one line
$(this).css({ "background-color" : $(this).attr('data-hover') });
You should use mouseenter and mouseleave events:
http://api.jquery.com/mouseenter/
HTML
<button class="btn wpb_btn-small" style="background:#00aff0;" data-color="#00aff0" data-hover="#0cbbfc">Button</button>
JS
$(function() {
$('.btn').mouseenter(function() {
var bg = $(this).attr('data-hover');
$(this).css( "background", bg );
});
$('.btn').mouseleave(function() {
var bg = $(this).attr('data-color');
$(this).css( "background", bg );
});
});
Live Demo
UPDATE:
It's actually better using Hover event, (refer to the upvoted answer :<)
I was hoping to use jQuery to change two CSS values.
I need to resize a Youtube videos iframe width and height on the fly
then a user resizes the browser window.
Here is my code:
function resizeWP( width, height ) {
$( "#1" ).text( "RESIZING webpage" );
var layer_width = $( "#red" ).width();
var layer_height = $( "#red" ).height();
var string_width = layer_width.toString();
var string_height = layer_height.toString();
$("#2").text(string_width);
$("#3").text(string_height);
$("iframe").css({"width":"1250px","height":"800px"});
}
$( window ).resize(function() {
resizeWP();
});
I am almost there.
Just need some help getting over the top.
Thanks in advance.
Change $("iframe").css({"width":"1250px","height":"800px"}); to $("iframe").css({"width": layer_width + "px","height": layer_height + "px"});.
However, it would be better to do this with CSS.
I hope I understood you correctly.
I am using this jquery plugin http://packery.metafizzy.co/ to create a dynamic grid layout. The plugin is working perfectly.
The problem is :
I am trying to create an option to add a dynamic grid on click event. If I hand code the html code for grid then the grid shows up perfectly but if I append the grid code to my template layout using jquery then the grid shows up from the very top of the layout and the plugin doesn't seem to adjust the grid position.
You can check my code and see the problem live here: http://jsfiddle.net/A7ubj/2/
I think the plugin is not adjusting the grid because my jquery append code is making the grid seat on the top.
Could you please tell me how to append the grid so that the plugin can adjust the grid perfectly?
This is how I am appending:
$(function(){
$('#myID').click(function(){
$( "#container" ).append( $( '<div class="item diff">Grid</div>' ) );
});
});
And this is my entire code:
JS:
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="packery.pkgd.min.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
var $container = $('#container');
// initialize
$container.packery({
itemSelector: '.item',
gutter: 10
});
});
</script>
<script>
$(function(){
$('#myID').click(function(){
$( "#container" ).append( $( '<div class="item diff">Grid</div>' ) );
});
});
</script>
CSS:
#container{
background-color:#F00;
width: 1130px;
margin:0px auto;
}
.item { width: 275px; background-color:#0C0;}
.item.w2 { width: 560px; background-color:#036; }
.diff{
min-height:300px;
}
.diff2{
min-height:250px;
}
HTML:
<button id="myID">Click</button>
<div id="container">
<div class="item diff">Grid</div>
<div class="item w2 diff2">Grid</div>
</div>
You can call packery.reload() or just use the packery initialization function again after you have append the images and to calculate every new image position. I use the masonry plugin and masonry.reload().
Update: To make masonry work with infinitescroll use a callback function: How to enable infinite scrolling with masonry?
Here is the code from my website. I use jquery templates and prepend. You can see that it call masonry('reload') after the prepend. It also init masonry from the new container. It also correct the width and the height of each image because I think there is an error in masonry. I think it's not really what you need because I don't cache the brick but I rebuild the entire container when I need it to show a new category. In your example you physically add a brick but I don't understand why it didn't work. The result is the same but not so clean.
$j.getJSON($j("#tag") function(response)
{
// Start masonry animated
if (response && response.length)
{
var container = $j('#container');
container.masonry({
itemSelector: '.brick',
columnWidth: brick_width,
isAnimated: !Modernizr.csstransitions
});
boxCount = response.length;
counter = 0;
$j.each(response, function(idx, ele)
{
container.prepend($j("#brickTemplate").tmpl(ele)).masonry('reload');
}
container.imagesLoaded(function()
{
$j("#brick").each(function()
{
var content = $j(this).find(">div");
var height = $j(this).find("img").attr("height");
if ( height == undefined )
{
content.css({
height: "300px"
});
} else {
content.css({
height: height
});
}
// bricks fade in
$j(this).delay(Math.floor(Math.random() * 1600)).fadeIn('slow');
// Bind Mousemove
$j(this).mousemove(function()
{
.....
}
}
}
}