Develop Reference

Setting at the same time: focus to carousel and change of item

I am using a carousel widget of the hugo framework but this is might be a very basic html question. I want a hyperlink in the text to do two things: change the item of the carousel widget and to focus on it.
My current code looks like the following:
linked phrase
This now successfully changes the item of the carousel to the desired one. But it does not focus to the carousel.
On the other hand I can focus on the carousel like this but of course the item of the carousel is not changed:
linked phrase
So how can I combine both? I tried also to include the data-target and data-slide attributes into a li-tag that surrounds the a-tag, which indeed triggers the change of item but which also ignores the href.
I also tried a span-tag within the a-tag without success either.
Maybe I need to do something with javascript? I tried but don't know javascript very well.
Thank you in advance!

OK, after all I solved the issue like the following. I created a javascript that scrolls to the carousel. I actually also built a button to connect that javascript. And within a table, I created cells that contain the attributes data-slide-to.
<th data-target="#hero_carousel" data-slide-to="4">
<button type="button" style="width:100%" onclick="document.getElementById('screen_focus').scrollIntoView({
behavior: 'smooth'});">Daten sammeln</button></th>

Reenable highlighting on page that has been disabled highlighting

I'm currently working on an issue for my company's webpage, in which one of the customer wanted a certain page, to be text highlight-able. The current setting for that certain page is that, the element block which displays the data cannot be highlighted and copied.
The code for the block looks something like below
<div id="mainpanel">
<div id="datapanel">
<!-- All the data are displayed in here -->
</div>
</div>
Upon my investigation, i found out that datapanel block has disabled highlighting. But the question that i still couldn't find out was, how did they do it.
To my understanding, there are several ways of disabling highlighting text on webpage, and i tried to do opposite of it, in hope of reenabling the text highlighting.
Thru CSS, with this as reference. I tried to do the reverse, by doing -webkit-user-select:text !important, but somehow it doesn't appear on the style attribute of that element which i put this on. I tested this again on Chrome's inspector, adding the css line manually to the said element (in this case the datapanel block), but somehow it got rejected out (it didn't appear inside the inspector's Styles. Usually if the css line is not working or being overridden, Chrome inspector will just slash the css line out). I tried add the css line above to the parent block (the mainpanel) and it appears on the style attribute, but it was slashed.
Using z-index, in case if the datapanel block was under a transparent layer with higher z-index (which i couldn't find any inside the Inspector). I tried to set datapanel block to z-index:10000000 but still didn't work.
Thru javascript, using this as reference, but didn't work too.
Checking all over the html, javascript and css for that page, but nothing suggested that the page is highlight-disabled thru html, css or js.
Somehow i feel lost in here. Anyone here has any idea on why the solutions above wouldn't work.

Hiding a single div section of a website with no selector

I am trying to hide a single snippet of code on my website as I upgraded to beta software and can't revert back without playing with my database.
I have attempted to use JQuery which I have achieved before though this div has no selector.
I am a graphic designer though have a small knowledge of code.
I also don't know how to find where the snippet has been input either nor can I just change the CSS. You can see it as the beta license warning in the yellow box.
Any help will be appreciated, the website is (Removed to prevent abuse)

Assuming this use case is actually legitimate and you have a valid license, you could just select child elements, for example to remove the beta warning:
$('#main-body div div div:first-child').css('display', 'none')
This selects the first child within several nested div elements, and hides it using the style display:none;

document.getElementById('main-body').children[0].children[0].children[0].style.display = 'none';
When the above code is called the div will be hidden.
It basically gets the position of an element with a selector, and then goes from child to child and then finally hides the snippet of code.
Hope this helps.

Anchor tag display full link issue

I found some really awesome link detection regex that works unbelievably great. It takes only the main part of a link and displays it as the body of the anchor tag and the whole link as the href. In example http://somesite.com/index.php?some=var will simply look like somesite.com. Which is just pure awesomeness, but then again it has its down side as well because someone might pass some variables that you might not necessarily want to send for some reason and I figured I need to display the whole url in the anchor body. Sadly I don't want to just give up on beautiful anchors and I decided I should display full link upon some event and thus came the trouble.
First I thought I should go for mouse hover (jquery's mouseenter) to display full link and then use mouseleave to make it beautiful again. Unfortunately that was unsuccessful due to short site names at the end of a line with a bunch of parameters. Example: If there is an anchor with body site.com and href http://site.com/some/params at the end of a line, after expanding it will go to the next line which would trigger the mouse leave and thus compressing it, which would by it self return the link to the original line and trigger the expand function creating an infinite loop.
Second idea was to have a right-click expand the link. Obviously the context menu on links that are to be expanded has to be disabled. Unfortunately, again, having the same link at the end of a line would cause a context menu to show up because after expanding the right click is also triggered at the blank space where the short link used to be.
I seem to have run out of ideas, does anyone have any?

Without breaking layout, you can use the native title property to display the full URL or, for something more customizable, a plugin such as jQuery UI's tooltip widget.
<a href="http://www.shorturl.com/?param=notSoShortUrl"
title="http://www.shorturl.com/?param=notSoShortUrl">shorturl.com</a>
Provided the title attribute is outputted in the initial markup, this solution works even with JS disabled. And if you feel like, jQuery UI tooltip may help customizing it for JS-enabled users.
If anyone is interested in how to patch the line-breaking issue described in the OP, here's my original solution to achieve non-line-breaking extensible links:
aaaaaaaaaaaaaaaaaa.com
$('a').hover(function(e) {
$(this).text(e.type == 'mouseenter' ? this.href : $(this).data('shorturl'));
}).each(function() {
$(this).css({
width: this.offsetWidth,
whiteSpace: 'nowrap',
display: 'inline-block'
}).data('shorturl', $(this).text());
});
Demo
Though, this is mostly a CSS hack and link text may leak outside of the container (and obviously, won't work if the container has overflow:hidden), so it is not very good for layout purposes. Better stick with title or the tooltip plugin.

How to set html to a element in extjs

1) How to set HTML to already created panel or any other Element?
I am a beginner. I tried the below to set some content inside the HTML
var clickedElement = Ext.getCmp('id').el.child('>');
clickedElement.setHTML("hello");
The above is working fine but the problem is that as the panel has many div's inside it.. the above approach is erasing those inside html (i.e div's) and replacing it with the above content.
I saw through Chrome that the panel has three nested div's. So, if I want to add HTML to it then I need to give something like below:
var clickedElement = Ext.getCmp('id').el.child('>').child('>'); //two times child
When I tried the above approach, I am successfully adding the html content and also the div's doesn't remove. Here the problem is that, I can't see the added content (maybe because of some default stylings, I can see the content is being added in Chrome console though.)
I am just asking whether there is any efficient way of adding HTML to the panel. In my opinion, this should be very easy approach which I am complexing here.
2) How to check whether a Element has a particular child ?
Suppose, for example, If I added a extjs Button as a child(item) into my panel while creating it. (which I can do). How to check whether the panel has the particular element (i.e button here)?
Before asking here, I searched alot and found somewhat relative but not helpful link to my problem.

In ExtJS most components are considered to have only one body element even if you see more on the dom. In contrast to jQuery which is basically added above a markup ExtJS generate the whole markup by itself.
Now to your question, to update the HTML of a component you can simply call the update() method like that
Ext.getCmp('id').update('hello');
See JSFiddle

Ext.ComponentQuery.query('#itemIdOfComponent').update('new value');
Do not set id's on components instead add an itemId configuration and see the documentation for Ext.ComponentQuery.query.