Elementor - anchor <a> inside accordion is empty when I publish the website - accordion

I have this weird problem - when I'm editing my website on elementor, the accordion works fine (open and close). when I'm not editing, it doesn't work.
I found the the problem is that the anchor that supposed to open and close the accordion element, is empty (just empty href attribute), so when I press it to open the element the page refreshing.
any idea why it happens? or how to fix that?

Related

Any links or HTML form items like button inside the Bootstrap 4 modal is unusable

I have cart icon, which when clicked loads the cart of the user in a Modal. However, any link or HTML form items like input or buttons that are within this modal are unusable. It can never be brought to focus nor clicked. I tried playing with CSS property z-index with no success.
Check site here.
Add any product to cart and then click bag/cart icon on the top right to see the issue.
Changing the pointer-events value in CSS solved the issue. wrapping the content part in an element with class modal-content is also fixing the issue as suggested in comments.

Get HTML Source of temporary drag & drop element

I have this page I can only access in the browser. There is a HTML element that only exists during drag&drop, and I want to get / analyze its HTML code in the Inspector / Firebug.. but as soon as I stop dragging, the element is removed.
Is there any way of getting the generated HTML element without wading through the JS source that builds it?
EDIT: got it, using the ctrl+S shortcut in chrome to save the page while holding mouseDown with the dragged-element did the trick.
Firebug html inspection shows the HTML of the page real time, so it does show changes caused by interaction. The trick is probably to scroll the inspection panel to the section of the HTML where your drag element appears. That way you would be able to see it while you drag.

Facebook like button pops up behind some elements

On my website the comment box that pops up when I press the Like button is placed behind some elements of the page and I really don't figure out how to fix it.
For 2 days I'm struggling with z-index property but no result and now I've found a solution by changing the overflow property of the parent div from hidden to visible/auto and it works! BUT I can't use this fix because that div has overflow set to hidden because I'm using the slimScroll plugin to customize the scrollbar...
This is the website, just click on any image and press the Like button to see what happens.
The right and left side of the popup are integrated in a table... I was thinking, if i remove the table and use just divs instead, the fix would be easier?
Thanks!

jquery modal window and opening a pdf file in new window

I need to show listing of names of PDF files which are to be printed. I need to show this list in a JQuery Modal window. If anybody can please suggest as to how to redirect the view to a jquery modal window? I plan to use JQuery UI for the purpose.
My other requirement is to display the select PDF file in a new window.
You could have a controller action that will return a partial view containing the list of PDF files. Then configure jQuery Dialog to use AJAX in order to fetch this list from the server and show it in a div. Finally inside this list you could add target="_blank" to anchor elements pointing to the actual PDF file so that it is opened in a new window when the user clicks on this anchor.
Check out fancybox plugin for jquery . You pass it a web link and set it to iframe.
secondly, if you want to open up a pdf in a new window set the anchor link target="_blank" i.e. title
hope that helps

Firebug: How can I inspect an element I can't click on?

I'm trying to use Firebug to inspect a page element that appears when I hover over a photo.
Problem is, the element's position is dynamically offset from the mouse position, so it's impossible for me to right-click on it to get the "Inspect Element" option.
I had hoped that the onhover element would be inserted into the DOM in a sensible place, but so far, I haven't been able to find it.
Any suggestions?
If you know where in the DOM the new element will be created (quite often those elements are created as children of the body element) you can set up a breakpoint for when it is created.
Let's assume that the element will be created as a child of the body element. You will be able to inspect the element if you follow these steps:
Load the page
activate FireBug's HTML panel
Locate the body element
Right-click on the body element and choose Break on Child Addition or Removal from the popup menu
Go hover over your photo to trigger the wanted element's creation
Script execution should then break as soon as the element is created. At that point you will have all the time you need to inspect that dynamically created element, even in the HTML panel.
This isn't an ideal solution, but you could investigate the onhover code to find out more information about the element that's being created. That info might allow you to find it in Firebug's DOM viewer.
Can you search for the element using the search bar at the top of the firebug window?
You can use CTRL+F to find it in the code view.