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>
Related
On the website I have form which is generated from ipresso. I'd like to style agreement to hide this content and after click I'd like to show it. But where I can find names of classes, id etc.? I'd like to add button "hide/show" which will hide or show content inside form.]
You can solve the problem using jQuery toggle class just add jquery to your website if not present
$("#button").click(function(){
$("#target_div").toggle();
});
based on your requirement set the initial css for the div to display:none if it is to be hidden initially.
In browser on the page generated by ipresso right-click on an element that you would like to change and select option Inspect-Element/Inspect. In the source code your form should have an id/class which you then would use in jQuery as selectors, in a way that I describe below.
$("#toggle-button").click(function(){
$("your-form").toggle();
});
OR
$("#hide-button").click(function(){
$("your-form").hide();
});
$("#show-button").click(function(){
$("your-form").show();
});
If the elements are always generated with different ids/classes on every refresh (I highly doubt that) another thing to do is to use more descriptive css selectors which rely on the structure of the html tags staying consistent. Again, you will be able to find them using the Inspect/Inspect-element found in most browsers. It is a workaround, but not something I would recommend doing since if the structure changes, you will have to edit in more than one place.
I was messing around with Bootstrap and created a page which has a simple navigation menu. I wanted to add modal for one of the links, which already has a tooltip.
And I did add the modal to li like this,
data-toggle="modal" data-target="#SettingsModal" data-toggle="tooltip"
Surprisingly, its working. It doesn't make much sense. Because at least one data-toggle has to be neglected.
I know that it is better to wrap it inside an element which has tooltip. My question is, how is this working?
It's working because the Bootstrap data attributes use separate jQuery selectors to "activate" the various components.
Since
$('[data-toggle="modal"]') and $('[data-toggle="tooltip"]') are both referenced in the Bootstrap JS code, both modal and tooltip components are working.
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.
I am trying to contenteditable attribute of summernote html editor pluging making false on page loading , but it doesnt affect.
Here My JS Code:
<script>
$(function(){
$('div#son_durum').children('.note-editor')
.children('.note-editing-area')
.children('.note-editable')
.attr('contenteditable',false);
});
</script>
What Can I Do Achive This?
Thanks
Why did you try to set contenteditable as false? Just leave it and don't initiate summernote on div#son_durum when your page is loading.
Or, do you want to toggle enable/disable state of summernote? A similar issue was already reported. See https://github.com/summernote/summernote/issues/1109
Using v0.8.2.
Here's my solution, though it's not perfect, especially if the developers change the html and or class names, but it works for what I need.
My MVC application has many summernote controls being dynamically added to a page, and each has an ID assigned to it. Some controls only display the image (upload) button, while others only display the text style buttons. For my image-only summernote controls I don't want the user to have the ability to type text, so I have to only disable the text-entry/image panel, not the whole control. This way I still allow the buttons to be used.
Here is my solution, and this works! Make sure this fires after the summernote control initialization.
var container = $('#summernote2').nextAll('div.note-editor:first').find('.panel-body');
if ($(container).length)
{
$(container).prop('contenteditable', 'false');
}
What's Happening?
Within my specific summernote control (id = summernote2), I locate the first div immediately below it with the specific class ('note-editor'). All of these are added dynamically to the page when the control is initialized. See the image below:
Then, using FIND, continue to work down the tree looking for the class 'panel-body', which is where the text is actually placed, highlighted in the image above.
Assuming I find it, then I change the contenteditable property to false. BAM!
There is probably more chaining that could be done, and perhaps more efficient methods but this works pretty neatly.
Why this way?
Because I have multiple controls on the page, and nothing directly linking my ID'd summernote DIV to all those other DIVs that are created as part of the initialization, I thought this was a good solution. Otherwise, how could I guarantee getting the correct panel-body class?
Good luck and let me know what you think! If this answers your question sufficiently, remember to check it as answered!
In a perfect world you'd think the developers would have made it easier. This should be all it takes, but no it doesn't work...:
$('#summernote2').summernote('contenteditable','false');
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.