שינוי תוכן או עיצוב על ידי jQuery על תנאי בכמות גדולה של אלמנטים

  • פותח הנושא s976
  • פורסם בתאריך
  • הוסף לסימניות
  • #1
יש לי הרבה דיוים בדף, בגודל קטן, שהם ממוקם טקסט. בחלקם, הטקסט אינו נכנס לתוך הדיו, ורק חלקו מוצג. לכל דיו יש ID בפני עצמו.
אני רוצה, שכל הדיוים, שהטקסט אינו נכנס בהם בשלמות, יהיו מעוצבים בסגנון מיוחד. זאת אומרת, שבכך קמום בדף שה height של הטקסט גדול יותר מה height של הדיו, אני רוצה להחיל בו שינוי מסוים על ידי jQuery
האם יש אפשרות כזאת?
תודה רבה.
 
  • הוסף לסימניות
  • #3
נכתב ע"י Uדה;718890:
קוד:
if ($('.my_div',this).text().length< 5)
{
    // זה יעזור לך?
}
עריכה:
נסה את זה
http://stackoverflow.com/questions/7668636/check-with-jquery-if-div-has-overflowing-elements
את הלינק בדקתי. זו לא הבעיה שלי (פתרתי את זה בקלות, איני יודע מה הם מסתבכים כל כך).
לגבי הקוד שלך, לא הבנתי את עומק כוונתך, למה ואיך זה יעזור. אתבונן על זה יותר מחר בעז"ה.
 
  • הוסף לסימניות
  • #4
מעניין אותי איך פתרת את זה

תוכל לכתוב כאן.
 
  • הוסף לסימניות
  • #5
נכתב ע"י mat;719432:
מעניין אותי איך פתרת את זה

תוכל לכתוב כאן.

יכול להיות שזה לא מתאים לכל המקרים, אבל במקרה שלי זה היה ממש פשוט.
אז שוב, מדובר בדיו שהגבלתי לו את הגובה, ועשיתי overflow:hidden
הכנסתי span בתוך הדיו, וכל הטקסט מיקמתי שם.
ואז פשוט השוותי את הגובה שלהם:
קוד:
 text_height = document.getElementById(spanID).offsetHeight;
      container_height= document.getElementById(divID).offsetHeight;
      if (text_height>container_height) {
 
  • הוסף לסימניות
  • #6
טוב, מצאתי פתרון...

יש ב-jQuery פונקציה מאוד יפה שנקראת each, שזה מפעיל פונקציה על כל אלמנט או אלמנטים שנבחרו על ידי הסלקטור. נגיד שאני רוצה לצבוע בצבע אדום כל דיו שהתוכן שלו לא נכנס בו בשלמות. הנה הקוד:
קוד:
 $(".clsTextDiv").each(function(){
              if($(this).height()<$(this).children("span").height()) {
              $(this).css({"background-color": "red"})
                       } ;
                                      });
 
  • הוסף לסימניות
  • #7
למה לא להשתמש ב MIN-HEIGHT?
זה יתן לדיב לגדול כפי הצורך
 
  • הוסף לסימניות
  • #8
נכתב ע"י wmw;722004:
למה לא להשתמש ב MIN-HEIGHT?
זה יתן לדיב לגדול כפי הצורך
לא הבנתי. נראה כאילו אתה מדבר על פתרון לאיזו בעיה אחרת ממה שדובר כאן. או שלא זכיתי להבין אותך נכון.
 
  • הוסף לסימניות
  • #9
הסבר:
לפי מה שהבנתי, קבעת גובה מסויים ל DIV [נגיד 100 פיקסל]
שללת גלילה מהDIV, כך שבמקרה שהטקסט לא מצליח להכנס בשלמותו, לא מצליחים לקרוא את מה שחרג כלפי מטה.
הפתרון היה למלא את הטקסט בתוך SPAN, ואז להשוות את הגובה של ה DIV עם ה SPAN.
אני מבין שכל הבעיה היא שלא רוצים לתת ל DIV גובה אוטומטי, כי חלק מהDIV ים הם בעלי טקסט דל, ומעוניינים שהם לא יהפכו ל"גמדים"
אז בדיוק לשם כך יש את התכונה min-heigth
בשונה מהתכונה height שקובעת גובה שרירותי בלא התחשבות בתכולה
התכונה min-height קובעת גובה מינימלי, ומאפשרת "גדילה" של הגובה בהתאם לתכולה.
[כנ"ל יש גם max-height למקרה הפוך, וכן min max ל width]
 
  • הוסף לסימניות
  • #10
נכתב ע"י wmw;723026:
הסבר:
אני מבין שכל הבעיה היא שלא רוצים לתת ל DIV גובה אוטומטי, כי חלק מהDIV ים הם בעלי טקסט דל, ומעוניינים שהם לא יהפכו ל"גמדים"...
[כנ"ל יש גם max-height למקרה הפוך, וכן min max ל width]
לא. לא זה הענין. יש לי טבלה, שכל השורות שלה צריכות להיות באותו גובה. אחרת זה לא יפה. אבל הבעיה היא שבחלק מהשדות הטקסט הוא גדול מדי. ולא נכנס בשלמות. אלא נגיד חצי ממנו. כשלוחצים על השורה, היא נמתחת ונפתחת כך שכל הטקס ייראה. אבל איך המשתמש יידע שהוא צריך ללחוץ לשם? בשביל זה אני מסמן את השדות שהטקסט לא נכנס שם בשלמות בעיצוב מיוחד. או ממקם שלש נקודות בסוף קטע הטקסט שנכנס שם. אבל בשביל זה אני צריך לדעת באלו שדות הטקסט לא נכנס בשלמות.
טוב, עכשיו אף אחד לא יוכל להגיד שלא הסברתי כראוי.
 
  • הוסף לסימניות
  • #11
יש כמה שיטות
או לפי ספירת אותיות [לא לשכוח שיש אותיות "רזות" כך שזה לא מדוייק]
או שבתחילה נותנים לשדה לתפוס גובה כפי הצורך, ואז עוברים על השדות בלולאה וקובעים להם את הגובה.
בשעת קביעת הגובה בודקים את הגובה הפיזי, ובמידה והוא גבוה מהגובה הרצוי, מוסיפים אובייקט ללחיצה להרחבה. [כך אפשר גם לקבוע בצורה יחסית {באחוזים} רק לא לשכוח להפעיל את הלולאה בכל פעם שקורה RESIZE]
יש גם פתרון מעניין, שבו משתמשים בשכבות, כאשר השכבה העליונה "מסתירה" את לחצן ההרחבה שנמצא בשכבה תחתונה יותר, אך הטקסט "דוחף" את השכבה הזו כשהוא גדל מעבר לגודל מסויים [במקרים גבוליים רואים את כפתור ההרחבה חלקית, ולא תמיד זה נראה יפה כל כך]
 

פרוגבוט

תוכן שיווקי
פרסומת

פוסטים חדשים שאולי לא קראת....

הצטרפות לניוזלטר

איזה כיף שהצטרפתם לניוזלטר שלנו!

מעכשיו, תהיו הראשונים לקבל את כל העדכונים, החדשות, ההפתעות בלעדיות, והתכנים הכי חמים שלנו בפרוג!

לוח מודעות

הפרק היומי

הפרק היומי! כל ערב פרק תהילים חדש. הצטרפו אלינו לקריאת תהילים משותפת!


תהילים פרק כה

אלְדָוִד אֵלֶיךָ יי נַפְשִׁי אֶשָּׂא:באֱלֹהַי בְּךָ בָטַחְתִּי אַל אֵבוֹשָׁה אַל יַעַלְצוּ אֹיְבַי לִי:גגַּם כָּל קוֶֹיךָ לֹא יֵבֹשׁוּ יֵבֹשׁוּ הַבּוֹגְדִים רֵיקָם:דדְּרָכֶיךָ יי הוֹדִיעֵנִי אֹרְחוֹתֶיךָ לַמְּדֵנִי:ההַדְרִיכֵנִי בַאֲמִתֶּךָ וְלַמְּדֵנִי כִּי אַתָּה אֱלֹהֵי יִשְׁעִי אוֹתְךָ קִוִּיתִי כָּל הַיּוֹם:וזְכֹר רַחֲמֶיךָ יי וַחֲסָדֶיךָ כִּי מֵעוֹלָם הֵמָּה:זחַטֹּאות נְעוּרַי וּפְשָׁעַי אַל תִּזְכֹּר כְּחַסְדְּךָ זְכָר לִי אַתָּה לְמַעַן טוּבְךָ יי:חטוֹב וְיָשָׁר יי עַל כֵּן יוֹרֶה חַטָּאִים בַּדָּרֶךְ:טיַדְרֵךְ עֲנָוִים בַּמִּשְׁפָּט וִילַמֵּד עֲנָוִים דַּרְכּוֹ:יכָּל אָרְחוֹת יי חֶסֶד וֶאֱמֶת לְנֹצְרֵי בְרִיתוֹ וְעֵדֹתָיו:יאלְמַעַן שִׁמְךָ יי וְסָלַחְתָּ לַעֲוֹנִי כִּי רַב הוּא:יבמִי זֶה הָאִישׁ יְרֵא יי יוֹרֶנּוּ בְּדֶרֶךְ יִבְחָר:יגנַפְשׁוֹ בְּטוֹב תָּלִין וְזַרְעוֹ יִירַשׁ אָרֶץ:ידסוֹד יי לִירֵאָיו וּבְרִיתוֹ לְהוֹדִיעָם:טועֵינַי תָּמִיד אֶל יי כִּי הוּא יוֹצִיא מֵרֶשֶׁת רַגְלָי:טזפְּנֵה אֵלַי וְחָנֵּנִי כִּי יָחִיד וְעָנִי אָנִי:יזצָרוֹת לְבָבִי הִרְחִיבוּ מִמְּצוּקוֹתַי הוֹצִיאֵנִי:יחרְאֵה עָנְיִי וַעֲמָלִי וְשָׂא לְכָל חַטֹּאותָי:יטרְאֵה אוֹיְבַי כִּי רָבּוּ וְשִׂנְאַת חָמָס שְׂנֵאוּנִי:כשָׁמְרָה נַפְשִׁי וְהַצִּילֵנִי אַל אֵבוֹשׁ כִּי חָסִיתִי בָךְ:כאתֹּם וָיֹשֶׁר יִצְּרוּנִי כִּי קִוִּיתִיךָ:כבפְּדֵה אֱלֹהִים אֶת יִשְׂרָאֵל מִכֹּל צָרוֹתָיו:
נקרא  2  פעמים
למעלה