Clever Geek Handbook

Jssor scanned lettering, unwanted text size

Using the JSSOR slider, the ScaleSlider () function calls $ ScaleWidth to resize the slider to fit the viewport. This is accomplished by applying a transform style to the # slider1_container element.

transform: scale(0.756364);

However, this also causes the text in the heading to resize, making it illegible.

<div id="slider1_container">
    <div u="slides">
            <div u="caption" class="myCaption">
                <p>Text goes here</p>                   
            </div>              
            <img u="image" src="myImage.jpg" />             
    </div>              
 </div>

How can I prevent the conversion style caption text (.myCaption) from being changed?

+3


source to share


4 answers


The signature should always scale with the slider. There is no way to stop the signature when scaling.

The css trick below may suit your needs,



    @media only screen and (max-width: 480px) {
        .myCaption{
            ...;
            font-size: 24px;
            ...;
        }
    }

    @media only screen and (max-width: 768px) {
        .myCaption{
            ...;
            font-size: 16px;
            ...;
        }
    }

    @media only screen and (min-width: 769px) {
        .myCaption{
            ...;
            font-size: 12px;
            ...;
        }
    }
-1


source


This was a very annoying issue, our designer kept complaining about auto-resizing. What I did to handle this was:

1.Created a div scaling function that returns my titles back to their original size. Shown is a div that was initially hidden and after applying the transform. The original size of my slider is 1920px wide, so I use that to calculate the percentage of browser resize to scale the headers back.



function ScaleCaptions(){   
bodyWidth = document.body.clientWidth;
widthChange=1920/bodyWidth;

if(bodyWidth<992){widthChange=widthChange/1.5;}

$(".captionHolder").css("transform","scale("+widthChange+")");  
$(".captionHolder").show(); 
}

  1. I call this function for the following three events after calling the ScaleSlider function:

    $(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);


$(window).bind("load", ScaleCaptions);
$(window).bind("resize", ScaleCaptions);
$(window).bind("orientationchange", ScaleCaptions);

  2. If you want to resize the headers at some point, the css rules won't work, so you need to do it with jquery. In my case, I wanted to change the dimensions of the signature below 992px, so I added this line of code to my function

    if(bodyWidth<992){widthChange=widthChange/1.5;}
+2


source


I would disagree with the above approach, sorry to write another answer, but I could not comment. Even when adding CSS rules for well-set breakpoints (768,992,1200, etc.), the text continues to resize along the slider, with the difference that it starts at the size of the text declared in the CSS rules. So, for example, if I wanted the 768px font size to be 16px, even though it would start at 16px by 768px, it would keep resizing along the slider, which I don't want. Also the font size of 16px at 1200px and the font size of 16px at 768px make a huge difference, and in the second case the text is very small

0


source


I have a similar automatic function that works for my solution:

function ScaleSliderCaptions(id,obj){
    //var parentWidth = jQuery('#'+id).parent().width();
    var bodyWidth = document.body.clientWidth;
    var widthChange=obj.$GetOriginalWidth()/bodyWidth;
    if(bodyWidth<(obj.$GetOriginalWidth()/2)){widthChange=widthChange/1.5;}
    jQuery(".slider-content").css("transform","scale("+widthChange+")").show();
}

obj - the slider object created earlier,

id - slider_container

0


source






More articles:


All Articles