Elementor ניווט בין פופאפ אחר למשנהו, אפשרי?

[אידיאלי!]

פס אדום = אין צבע, אין ערכים בכלל. לא?

פס אדום זה אומר שלא הכנסת הגדרת צבע- הוא שואב הגדרות ברירת מחדל.
הגדרות ברירת מחדל של קופסא מתהפכת זה צבעי הירוק-כחול...
זה סתם לידע, לפעם הבאה כשמאסק עיגול לא יתאים לך...

 

[EPaP]

@ראובן ליבוביץ @אלעזר 1 @>השראה< @אידיאלי!
אין לכם מושג כמה התגובות שלכם עזרו לי!

בעז"ה אשתף איך יצא

***

בינתיים, צריכה את עזרתכם, בפעם האחרונה אני מקווה:

אני צריכה ליצור בסיס כזה,
בו אפשר ל'תפוס' את אחד העיגולים הצבעוניים
ולבעביר אותו דרך, כאילו הוא מתגלגל לאחד השקעים.





חשבתי לעשות הגדרה של לפי תזוזת עכבר.
הענין הוא שאז כל העיגולים הצבעוניים יזוזו לי ואני צריכה שרק אחד.
שלוחצים-גוררים עיגול צבעוני, ואז הוא "נוסע" לחור? יש דרך לפתור את זה?

 

[>השראה<]

שלוחצים-גוררים עיגול צבעוני, ואז הוא "נוסע" לחור? יש דרך לפתור את זה?

נראה לי שאפשר ב- CSS

 

[אידיאלי!]

ה

אני צריכה ליצור בסיס כזה,
בו אפשר ל'תפוס' את אחד העיגולים הצבעוניים
ולבעביר אותו דרך, כאילו הוא מתגלגל לאחד השקעים.

ישלך רעיונות מדהימים!
אבל גדול עלי למצוא פתרונות כל כך יצירתיים
עוקבת גם. מעניין אותי אם יש לזה פתרון...
ואני גם סקרנית לראות מה את מתכננת שם...
תשתפי...

 

[EPaP]

ישלך רעיונות מדהימים!
אבל גדול עלי למצוא פתרונות כל כך יצירתיים
עוקבת גם. מעניין אותי אם יש לזה פתרון...
ואני גם סקרנית לראות מה את מתכננת שם...
תשתפי...

תודה תודה
האמת שהרעיונות לא שלי רק.
אעלה את התוצאה הסופית בעז"ה. ברור.

 

[EPaP]

אגב, הבנתי מחיים בניסטי שעדיף היה לי לעשות את כל הפופאפים בג'ט, עם פואפא דינאמי.
לצרי אין לי מספיק זמן כדי ללמוד איך זה עובד
אבל מי שמנסה לעשות משהו דומה בעתיד - שידע שיש עוד אופציות.

 

[roni ravitz]

שלוחצים-גוררים עיגול צבעוני, ואז הוא "נוסע" לחור? יש דרך לפתור את זה?

אם את רוצה שיהיה אפשר לגרור אלמנט צריך טיפה js
הנה דוגמא לקוד

<style>
#mydiv  {
    cursor: move;
    }



</style>




 

<script>
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

אפי' עשיתי לך דוגמא

אלמנט נגרר - איזיפרס

wpguide.co.il

 

[EPaP]

אם את רוצה שיהיה אפשר לגרור אלמנט צריך טיפה js
הנה דוגמא לקוד

<style>
#mydiv  {
    cursor: move;
    }



</style>






<script>
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

אפי' עשיתי לך דוגמא

אלמנט נגרר - איזיפרס

wpguide.co.il

ווואו! תודה רבה רבה!

 

[ראובן ליבוביץ]

אגב, הבנתי מחיים בניסטי שעדיף היה לי לעשות את כל הפופאפים בג'ט, עם פואפא דינאמי.

בוודאי! זה הדבר הכי טוב! אבל את רוצה באלמנטור...

 

[סיון]

@EPaP מאד מקצועי מה שאכתוב כאן עכשיו ומאד קשור לאשכול

אבל מה לעשות שנזכרתי בך היום שראיתי את זה -

 

[EPaP]

אבל מה לעשות שנזכרתי בך היום שראיתי את זה -

צפה בקובץ המצורף 936265

כמה יופי ויצירתיות!

(אני מבינה שכדאי לי להעלות לפה עוד דברים
ובכללי להיות פעילה יותר בפורום
אם אני רוצה לראות השראות מעניינות כאלה )

 

[TWIN-A]

אם את רוצה שיהיה אפשר לגרור אלמנט צריך טיפה js
הנה דוגמא לקוד

<style>
#mydiv  {
    cursor: move;
    }



</style>






<script>
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

אפי' עשיתי לך דוגמא

אלמנט נגרר - איזיפרס

wpguide.co.il

ווואו מדהים, איפה בעצם מכניסים את הקוד?
זה לא בcss ..

 

[roni ravitz]

ווואו מדהים, איפה בעצם מכניסים את הקוד?
זה לא בcss ..

בעיקר js אפשר להכניס בווידג'ט html
האתר יצא מאוד יפה, לא יודע אם @EPaP רוצה שיראו

 

[EPaP]

ווואו מדהים, איפה בעצם מכניסים את הקוד?
זה לא בcss ..

גם אני הסתבכתי עם זה,
ופניתי ל @רוני רביץ

האתר יצא מאוד יפה, לא יודע אם @EPaP רוצה שיראו

האתר יצא מהמם.
רק שבסוף אוגוסט אוכל להפיץ את הקישור.
אזכור לעדכן פה.

 

[אלעזר 1]

רק עכשיו אני רואה (ההתראות לא עובדות?).
יש לזה ספרייה בנויה בתור פלאגין ל-JQUERY שמאפשרת גם להגדיר יעד ומסגרת:

Draggable | jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

jqueryui.com